Skip to main content

SCSS

SCSS (Sassy CSS) is the main syntax of the Sass CSS preprocessor. It uses curly braces and semicolons like CSS, so every valid CSS stylesheet is also valid SCSS. It adds features like variables, nesting, mixins, and functions to CSS.

info

Sass has two syntaxes. The SCSS syntax (.scss), which uses curly braces and semicolons like CSS, is documented here. For the indented syntax (.sass), see Sass.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, SCSS!</h1>\n  <p>This is styled with <strong>SCSS</strong> syntax.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "scss",
      "content": "$primary: #3182ce;\n$bg: #f0f4f8;\n$radius: 8px;\n\n@mixin flex-center {\n  display: flex;\n  gap: 1em;\n}\n\n.container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n  border-radius: $radius;\n  background: $bg;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n    line-height: 1.6;\n  }\n}\n\n.features {\n  @include flex-center;\n  list-style: none;\n  padding: 0;\n\n  li {\n    background: $primary;\n    color: white;\n    padding: 0.5em 1em;\n    border-radius: $radius;\n  }\n}\n"
    }
  }
};
createPlayground('#container', options);

Usage​

SCSS code added to the style editor is compiled to CSS before being added to the result page.

SCSS uses a CSS-like syntax with curly braces and semicolons. Since it is a superset of CSS, plain CSS works as-is and you can adopt Sass features incrementally.

For more details about CSS support in LiveCodes, including CSS processors, style imports, CSS modules, and CSS frameworks, see the CSS feature documentation.

Loading External Styles​

SCSS supports loading external stylesheets and modules using @use, @import, and meta.load-css(). Bare module specifiers are resolved to full CDN URLs.

Using @use​

You can load npm packages with @use:

@use 'bootstrap/scss/bootstrap' as *;

Using @import​

You can import external modules and use their mixins:

@import 'sass-utils';

.center {
  @include block--center;
  width: fit-content;
}

Using meta.load-css()​

You can dynamically load stylesheets from URLs using the built-in sass:meta module:

@use 'sass:meta';

@include meta.load-css(
  'https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/src/livecodes/styles/app.scss'
);
tip

For more information about loading and importing styles, see the Style Imports documentation.

Language Info​

Name​

scss

Extensions​

.scss

Editor​

style

Compiler​

SCSS is compiled using the official Dart Sass compiler (running in the browser).

Custom Settings​

Custom settings added to the property scss are passed as a JSON object to the Sass compiler during compile. Please check the Sass JavaScript API documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "scss": {
    "style": "compressed"
  }
}

Code Formatting​

Using Prettier.

Sponsors