Using SASS / SCSS

acodez has first-class SASS support out of the box. No configuration needed.

How It Works

Acode plugins cannot link external stylesheets — styles must be injected as a JavaScript string into the DOM. acodez uses esbuild-sass-plugin configured with type: "css-text", which compiles your .scss files and exports the final CSS as a raw string.

Basic Usage

Write your styles in src/style.scss:

.my-plugin {
  display: flex;
  flex-direction: column;
  background: var(--primary-color, #1e1e2e);

  .header {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent, #cba6f7);
  }

  &:hover {
    opacity: 0.9;
  }
}

Import it directly in your TypeScript:

import style from "./style.scss";

// style is a raw CSS string: ".my-plugin { display: flex; ... }"
const styleSheet = document.createElement("style");
styleSheet.innerHTML = style;
document.head.appendChild(styleSheet);

Supported SASS Features

Feature	Supported
Nesting	Yes
Variables ($var)	Yes
Mixins (@mixin)	Yes
Functions	Yes
Partials (@use, @forward)	Yes
CSS Custom Properties (var())	Yes

Using Acode CSS Variables

Acode exposes CSS custom properties that match the user's active theme. Use them to make your plugin look native:

.my-plugin {
  background: var(--popup-background-color);
  color: var(--popup-text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: var(--font);
}

TIP

Using Acode's CSS variables makes your plugin automatically compatible with all user-installed themes — light, dark, and everything in between.