Sass Parsing

Definition and Usage

Sass reads a stylesheet as a sequence of Unicode code points and parses it directly—not by building a separate token stream first.

How Parsing Works

1. Bytes on disk  →  decode as Unicode (UTF-8 with Dart Sass)
2. Unicode text   →  parse as Sass syntax (SCSS or indented)
3. Valid tree     →  compile to CSS
4. Invalid syntax →  stop with file / line / column + reason

Older compilers could detect encoding via a BOM or @charset. Dart Sass supports UTF-8 only—save files as UTF-8 and you are set.

Key Ideas

What the official parsing model emphasizes:

Related Topics

Previous: syntax (SCSS vs indented). Next: property declarations. Also: comments, Dart Sass CLI, installation.

SCSS Examples

Open View Compiled CSS for verified Dart Sass output, or the compiler error text when parsing fails.

.hero {
  content: "Hello";
  color: #036;
}

.hero {
  content: "Hello";
  color: #036;
}

.card {
  padding: 1rem;

  .title {
    font-weight: bold;
  }
}

.card {
  padding: 1rem;
}
.card .title {
  font-weight: bold;
}

.button {
  color: blue;
  // missing }

Error: expected end of rule.
  ╷
2 │   color: blue;
  │               ^
  ╵
  missing-brace.scss 2:15  root stylesheet

$primary = #036;

.button {
  color: $primary;
}

Error: expected ":".
  ╷
1 │ $primary = #036;
  │          ^
  ╵
  bad-assign.scss 1:10  root stylesheet

.button {
  width: calc(100% + 10px));
}

Error: expected ";".
  ╷
2 │   width: calc(100% + 10px));
  │                           ^
  ╵
  extra-paren.scss 2:27  root stylesheet

Sass Support

Parsing behavior is shared; encoding support differs by implementation.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. Save the file as UTF-8
2. Pick .scss or .sass (see Syntax)
3. Match braces / indentation
4. Use $name: value; for variables
5. Read the caret + line when the compiler fails