Skip to main content

Sass

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that uses the indented syntax (no curly braces or semicolons). It adds features like variables, nesting, mixins, and functions to CSS.

info

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

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Sass!</h1>\n  <p>This is styled with <strong>Sass</strong> indented 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": "sass",
      "content": "$primary: #3182ce\n$bg: #f0f4f8\n$radius: 8px\n\n=flex-center\n  display: flex\n  gap: 1em\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  p\n    color: #4a5568\n    line-height: 1.6\n\n.features\n  +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"
    }
  }
};
createPlayground('#container', options);

Usage​

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

Sass uses the indented syntax, which relies on indentation instead of curly braces and newlines instead of semicolons.

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​

Sass 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​

sass

Extensions​

.sass

Editor​

style

Compiler​

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

Custom Settings​

Custom settings added to the property sass 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
{
  "sass": {
    "style": "compressed"
  }
}

Code Formatting​

Code formatting is not supported for the Sass indented syntax. Prettier supports SCSS (.scss) but not the indented .sass syntax.

Sponsors