Sass Language Structure

Sass builds on CSS to make stylesheets easier to organize and reuse. Its structure separates rules and declarations into statements, and it evaluates values and calculations as expressions. Understanding this structure helps you write clearer, smaller and more maintainable SCSS stylesheets while keeping full compatibility with standard CSS.

In this tutorial you will learn how to organize Sass files, how statements like variables, mixins and at-rules work, how expressions and functions evaluate values, and how to use nesting and parent selectors for cleaner code.

Statements in Sass Structure

What are Sass Statements?

  • Sass stylesheets are built from statements just like CSS.
  • A statement can be a single declaration or a block that contains other nested statements.
  • Block statements enable nesting so child statements live inside parent blocks.
  • Nesting keeps related styles together and reduces selector repetition.
  • Sass offers two syntaxes: SCSS uses braces and semicolons while indented Sass relies on indentation and new lines.
  • Understanding statement types helps you organize and maintain stylesheets.

Here is a simple example showing how a single statement looks in SCSS, Sass, and CSS:

Statements Structure Example

SCSS Statement Structure
$primary-color: red;
Sass Statement Structure
$primary-color: red
CSS Statement Structure
color: blue;

Universal Statements

Universal SCSS or Sass statements are recognized across all stylesheets. These statements can be used anywhere in your code and are fundamental to writing structured and reusable styles.

  • Variable declarations, for example $var: value
  • Flow control at-rules, such as @if and @each
  • Rules for handling messages, including @error, @warn, and @debug

CSS Statements

CSS statements form a core part of Sass and SCSS, as they are responsible for producing the final stylesheet. These statements can appear almost anywhere in a Sass file and give structure or base to the output CSS.

  • Style rules: for example body { /* ... */ }
  • At-rules: such as @media or @font-face
  • Mixin calls: applied with @include
  • The @at-root rule: used to move styles out of the current nesting context

The key exception is inside @function blocks. Functions may only return expressions and cannot generate CSS directly. For instance, placing body { color: red; } inside a function would cause an error.

Top-Level Statements

In Sass script, top-level statements are defined at the highest level of a stylesheet. These include Sass directives and they cannot be nested inside other rules or selectors.

Some at-rules, such as @media, can contain style rules, but they cannot contain top-level definitions. They can also appear within CSS statements but always remain at the top of the hierarchy.

Other Statements

Sass also includes additional statements that follow specific structural rules.

  • CSS style declarations must follow certain restrictions within Sass
  • Properties like height: 100% are valid inside style rules and some CSS at-rules
  • The @extend rule can only be used within style rules

Expressions in Sass Structure

What are Sass Expressions?

Sass or SCSS expressions extend the idea of CSS values, adding more flexibility and functionality within the stylesheet structure.

  • A CSS declaration has two parts: a property on the left and a value on the right, which is considered an expression.
  • Any CSS value is treated as an expression, but Sass or SCSS expressions have fewer limitations and greater power.
  • Expressions can be passed as arguments to mixins and functions
  • Sass expressions are also known as SassScript

Literals Expressions

In both Sass and SCSS syntaxes, literals are basic expressions with static values that form a core element of the stylesheet framework.

Numbers Values with or without units, e.g. 15 or 85%
Strings Quoted or unquoted values, e.g. italic or "Times New Roman"
Colors Defined by name or code, e.g. red or #124432
Booleans Logical values true or false
Singleton Represents a single value, e.g. null
List of Values Values separated by spaces or commas, written with or without brackets, e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif, or [col1-start]
Maps Key-value pairs, e.g. ('background': red, 'foreground': brown)

Operations Expressions

In both Sass and SCSS, operations are expressions that allow performing calculations, comparisons, and logical evaluations. They form a key part of the stylesheet foundation by extending functionality beyond simple values.

Operator Description
== and != Check if two values are equal or not
+, -, *, /, % Arithmetic operators for mathematical calculations
<, <=, >, >= Compare values to determine order or equality
and, or, not Boolean operators for logical evaluations of true, false, or null
+, -, / Also used for concatenating strings
( ) Control the precedence and grouping of operations

Other Expressions

In addition to literals and operations, Sass and SCSS also provide several other expressions that add flexibility to stylesheet structure.

  • Variables: Store reusable values such as $fontcolor
  • Function Calls: Use built-in or custom functions, e.g. nth($list, 2) or var(--main-bg-color)
  • Special Functions: Functions with unique parsing rules, e.g. calc(1px + 70%) or url(https://example.com/logo.png)
  • Parent Selector: Reference the parent with &
  • !important: Parsed as an unquoted string value