I. Introduction
-
SASS stands for Syntax Awesome Style Sheets, is a powerful CSS extention so all valid syntaxes in CSS will be valid in SASS
-
SASS has 2 syntaxes:
1. SCSS syntax (.scss) - used most commonly
2. Indented syntax (.sass) - unuasually used
II. Installation using Node.js
npm install -g sass
III. Execution
-
Command to compile Sass to CSS:
sass input.scss output.css --watch -
input.scss: source file to build from
-
output.css: path to put output CSS to
-
watch: flag to observe the change from input file and re-compile css file each time the change happened
IV. SASS Syntaxes
1. Variables
- Variables are places used to store information which you want to reuse throughout your sheet.
$textColor: #fff;
p {
color: $textColor;
}
- SASS syntax uses indentation and newlines to replace curly braces {} and semicolons ; respectedly.
$textColor: #fff
p
color: $textColor: #fff
2. Nesting
- Sass allows you to nest your CSS selectors as the way HTML elements nested.
<nav class="header"> <ul class="header-inner"> <li> <a></a> </li> </ul>
</nav>
nav { ul{ } li { }
}
or
.header { &-inner{ // .header-inner } &:hover{ // .header:hover }
}
3. Mixins
- mixin is a CSS code block which you can reuse throughout your sheet. mixin can receive variables as arg so its somehow the same as function.
@mixin bgc($bgColor: "black") { background-color: $bgColor;
} body { @include bgc($bgColor: "#333");
}
4. Partials/Modules
- A partial is a SASS file name starting with underscore _: _partial.scss
- A partial file can contain little snippets of CSS so you can include in other SASS files, using partial is a great way to modualize and maintain CSS code.
- Partial files will not be generated into CSS files by SASS.
- Partials are used with @use rule, @use loads SASS file as a module so you can refer to its variables, mixins and functions.
// _base.scss
$textColor: #fff; // style.scss
@use 'base'; body { background-color: #000; color: base.$text-color;
}
5. Extend/Inheritance
- Using @extend allows you to share a set of CSS prop from one selector to others.
%common-style { // place-holder border-radius: 25px; width: 100px;
} .yes-btn{ @extend %common-style; color: green;
} .no-btn{ @extend %common-style; color: red;
}
6. If condition statement
@if $direction == "left" { // do smt
}
7. Operators
- Some SASS math operators are +, -, *, math.div(), %