1.8 KiB
title | introduction |
---|---|
Syntax | Sass supports two different syntaxes. Each one can import the other, so it's up to you and your team which one to choose. |
SCSS
The SCSS syntax uses the file extension .scss
. With a few small exceptions,
it's a superset of CSS, which means essentially all valid CSS is valid SCSS as
well. Because of its similarity to CSS, it's the easiest syntax to get used to
and the most popular.
SCSS looks like this:
@mixin button-base() {
@include typography(button);
@include ripple-surface;
@include ripple-radius-bounded;
display: inline-flex;
position: relative;
height: $button-height;
border: none;
vertical-align: middle;
&:hover { cursor: pointer; }
&:disabled {
color: $mdc-button-disabled-ink-color;
cursor: default;
pointer-events: none;
}
}
The Indented Syntax
The indented syntax was Sass's original syntax, and so it uses the file
extension .sass
. Because of this extension, it's sometimes just called "Sass".
The indented syntax supports all the same features as SCSS, but it uses
indentation instead of curly braces and semicolons to describe the format of the
document.
In general, any time you'd write curly braces in CSS or SCSS, you can just indent one level deeper in the indented syntax. And any time a line ends, that counts as a semicolon. There are also a few additional differences in the indented syntax that are noted throughout the reference.
The indented syntax looks like this:
@mixin button-base()
@include typography(button)
@include ripple-surface
@include ripple-radius-bounded
display: inline-flex
position: relative
height: $button-height
border: none
vertical-align: middle
&:hover
cursor: pointer
&:disabled
color: $mdc-button-disabled-ink-color
cursor: default
pointer-events: none