Docs
Blog
Docs
Blog

Sass / Sass Modules

Sass is a powerful CSS extension language that enables you to use features like variables, mixins, and nested rules to write clean, maintainable CSS.

Extension.js supports both .scss and .sass file extensions. It also supports component-level Sass via CSS Modules using .module.scss or .module.sass.

Starter Sass Template

Extension.js includes a New Tab Sass template for new projects. This template provides the easiest way to start using Sass in your extension.

Sass Extension Template

Try it yourself

npm
pnpm
yarn
npx extension@latest create my-extension --template=new-sass

Usage With An Existing Extension

You can integrate Sass with an existing Extension.js project by installing the necessary dependencies and configuring your files.

Installation

Install the required dependency:

npm
pnpm
yarn
npx install -D sass

Example Usage in an HTML File

To include Sass in an HTML file, compile your .scss or .sass files into CSS and add the compiled CSS file to your HTML file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>New Extension</title>
    <link rel="stylesheet" href="./css/globals.css" media="screen" />
  </head>
  <body>
    <h1 class="text-4xl font-bold">Hello, Extension.</h1>
  </body>
</html>

Example Usage in a JavaScript File

Import your compiled Sass file into a JavaScript file:

./NewTabApp.js

import './css/globals.css';

console.log("Hello, Extension!");

Sass Modules

Sass Modules allow you to scope styles locally, just like CSS Modules. You can use .module.scss or .module.sass to activate Sass Modules, which prevent naming conflicts in your stylesheets.

Starter Sass Module Template

Extension.js provides a New Tab Sass Module template, which integrates Sass Modules right out of the box.

Sass Module Extension Template

Try it yourself

npm
pnpm
yarn
npx extension@latest create my-extension --template=new-sass-modules

Using Sass Modules in an Existing Extension

To enable Sass Modules, rename your Sass file to include .module.scss or .module.sass. This will automatically scope the styles to your component.

- button.scss
+ button.module.scss

Example Usage

After renaming your Sass file, import it into your script:

import styles from "./styles/button.module.scss";

const element = document.createElement("h1");
element.className = styles.primaryColor;
element.innerText = "Hello, Extension!";
document.body.appendChild(element);

In the Sass file, you can define and export variables as well:

/* styles/button.module.scss */

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

React/Preact Example Usage

Import the Sass module into your React or Preact component, and use the scoped class names:

import styles from "./styles/button.module.scss";

export default function MyComponent() {
  return <h1 className={styles.primaryColor}>Hello, Extension!</h1>;
}

Vue Example Usage

For Vue, import your Sass module and use it in the component like this:

<template>
  <h1 :class="$style.primaryColor">Hello, Extension!</h1>
</template>

<script>
import styles from "./styles/button.module.scss";
export default {
  data() {
    return { styles };
  },
};
</script>

<style lang="scss" module>
@import "./styles/button.module.scss";
</style>

Svelte Example Usage

In Svelte, import Sass files and use them like this:

<script>
  import styles from './styles/button.module.scss';
</script>

<h1 class={styles.primaryColor}>Hello, Extension!</h1>

<style lang="scss" module>
  @import './styles/button.module.scss';
</style>

Next Steps

  • Ensure the quality and consistency of your Sass files by using Stylelint.