SCSS Syntax Fundamentals

SCSS uses the same basic structure as CSS: selectors contain declaration blocks, and declarations consist of property-value pairs separated by semicolons.

Sass adds constructs such as variables, mixins, functions, control directives, and module-loading rules. These constructs are evaluated by the compiler rather than interpreted as ordinary browser CSS declarations.

Comments have different purposes. A // comment is removed during compilation. A /* ... */ comment is generally preserved in expanded output unless it is marked for removal with Sass's special comment syntax or output settings.

Understanding the distinction between source syntax and generated CSS makes compiler errors easier to diagnose.

A Simple SCSS Stylesheet

$spacing: 1rem;

.page {
  padding: $spacing;
  background-color: #f5f5f5;

  /* This comment may remain in expanded CSS. */
  // This comment is removed from compiled CSS.

  h1 {
    margin-bottom: 0.5rem;
  }
}

💡 The variable is resolved during compilation, and the nested h1 selector is expanded into a separate CSS selector. The generated CSS contains .page and .page h1 rules. The browser does not see the SCSS variable or the original nesting structure.

Knowledge Check

What does Sass do with a normal `//` source comment during compilation?

SCSS Syntax Fundamentals

STAY UPDATED WITH BYTES!