Home Sass Syntax Sass Syntax Definition
Definition and Usage Sass has two syntaxes : SCSS (.scss) and the indented syntax (.sass). Both support the same features, and each can load the other.
Start with SCSS. SCSS is a CSS-like superset (with a few small exceptions). Almost all valid CSS is valid SCSS—easiest for beginners and the most popular.
Indented = original Sass. Use indentation instead of { } and semicolons. People often call this “Sass” because of the .sass extension—SCSS is still Sass.
Same language, different writing style. Pick one for your team. Mixing files is fine because either syntax can @use the other.
Overview
The Two Syntaxes .btn {
display: inline-flex;
&:hover { cursor: pointer; }
} .btn
display: inline-flex
&:hover
cursor: pointer Rule of thumb: wherever SCSS uses braces, indent one level in .sass. Wherever a statement can end, a newline acts like a semicolon.
Code
SCSS & Sass Examples Open View Compiled CSS for verified Dart Sass output. SCSS and indented samples that do the same thing compile to the same CSS.
1. SCSS 2. Indented 3. Nest SCSS 4. Nest Sass 5. Cross-load Example 1 — SCSS (Official Style) Braces, semicolons, and nested & states—CSS-familiar.
@mixin button-base() {
display: inline-flex;
position: relative;
height: 40px;
border: none;
vertical-align: middle;
&:hover {
cursor: pointer;
}
&:disabled {
cursor: default;
pointer-events: none;
}
}
.btn {
@include button-base;
color: #111;
} .btn {
display: inline-flex;
position: relative;
height: 40px;
border: none;
vertical-align: middle;
}
.btn:hover {
cursor: pointer;
}
.btn:disabled {
cursor: default;
pointer-events: none;
}
.btn {
color: #111;
} How It Works .scss uses CSS-like punctuation.@mixin holds shared declarations.&:hover nests states on the parent.Matches the official SCSS sample idea.Example 2 — Indented Syntax (Same Features) Same mixin and button—indentation replaces braces and semicolons.
@mixin button-base()
display: inline-flex
position: relative
height: 40px
border: none
vertical-align: middle
&:hover
cursor: pointer
&:disabled
cursor: default
pointer-events: none
.btn
@include button-base
color: #111 .btn {
display: inline-flex;
position: relative;
height: 40px;
border: none;
vertical-align: middle;
}
.btn:hover {
cursor: pointer;
}
.btn:disabled {
cursor: default;
pointer-events: none;
}
.btn {
color: #111;
} How It Works .sass uses indentation for structure.Newlines end statements (like semicolons).Features match Example 1 exactly.CSS output is the same as the SCSS version.Example 3 — Nested Rules in SCSS Nested selectors with braces—common SCSS style.
.card {
padding: 1rem;
.title {
font-weight: bold;
}
} .card {
padding: 1rem;
}
.card .title {
font-weight: bold;
} How It Works Inner .title nests under .card.Compiler flattens to .card .title.More on nesting .Compare with Example 4.Example 4 — Nested Rules in Indented Sass Same nesting without braces—indent one level deeper.
.card
padding: 1rem
.title
font-weight: bold .card {
padding: 1rem;
}
.card .title {
font-weight: bold;
} How It Works Indent replaces the SCSS braces.No semicolons on declarations.Same CSS as Example 3.Whitespace must stay consistent (spaces or tabs, not mixed).Example 5 — SCSS Loads an Indented Partial Each syntax can load the other—here SCSS @uses a .sass file.
@use "theme" as *;
.button {
color: $accent;
} .button {
color: #c6538c;
} How It Works _theme.sass defines a variable in indented syntax.load.scss loads it with @useas * brings members into the local namespace.Teams can mix file styles without rewriting everything.Edge Cases & Pitfalls Most syntax bugs are the wrong extension or mixed indentation in .sass.
.scss Extension picks the parser Indented code in a .scss file (or braces in .sass) will fail. Match the extension to the style.
indent Keep indentation consistent In .sass, spaces vs tabs matter. Pick one and stick to it.
multiline Multiline indented statements need Dart Sass 1.84+ Line breaks only where a statement cannot end (inside brackets, or between keywords in Sass @-rules).
name “Sass” vs SCSS naming People say “Sass” for the indented syntax. SCSS is still Sass—just the CSS-compatible form.
Toolchain
Sass Support Both syntaxes are first-class on Dart Sass.
Feature Status SCSS (.scss) Supported Indented syntax (.sass) Supported Load SCSS from Sass / vice versa Supported Multiline indented statements Dart Sass 1.84+
Compile with the Dart Sass CLI .
Remember
Key Takeaways Two syntaxes : SCSS and indented .sass.
Same features —only the writing style changes.
Beginners : prefer SCSS (CSS-like).
Either can load the other with @use.
One line: choose SCSS unless you specifically want the indented .sass style—both are Sass.
Practice
Compile Notes Practical checklist:
1. Pick .scss (recommended) or .sass
2. Match braces/semicolons OR indentation to that choice
3. Keep indentation consistent in .sass files
4. Use @use to load the other syntax when needed
5. Compile with the Dart Sass CLI Frequently Asked Questions How many Sass syntaxes are there? Two. SCSS uses the .scss extension and looks like CSS with braces and semicolons. The indented syntax uses .sass and uses indentation instead of braces and semicolons.
Which syntax should beginners learn? SCSS. It is the easiest to learn and the most popular because almost all valid CSS is valid SCSS.
Do SCSS and indented Sass have different features? No. Both support the same Sass features. Only the writing style differs (braces/semicolons vs indentation).
Can one syntax load the other? Yes. Each syntax can load the other (for example with @use), so teams can mix .scss and .sass files if needed.
What is the indented syntax sometimes called? Because it uses the .sass extension, people often just call it "Sass". SCSS is still Sass—it is the CSS-compatible syntax of the same language.
Can indented statements span multiple lines? In Dart Sass 1.84+, yes—when line breaks occur where a statement cannot end (inside parentheses/brackets, or between keywords in Sass @-rules).
Next: Sass Parsing See how Sass reads Unicode input and reports parse errors.
Parsing → About the author Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
8 people found this page helpful
