SASS / SCSS
- SASS is a CSS preprocessors that make it easier to write complex CSS
- e.g., support for variables
- https://sass-lang.com/
- SASS supports two different syntaxes: SASS and SCSS
- SASS syntax
- is older and more like a scripting language
- SASS uses an indention-based .haml-like syntax
- SCSS syntax
- is newer and is more like an extension of CSS.
- All CSS is valid SCSS.
- SASS and SCSS can import each other (since they are different syntaxes used by the same engine)
- Most of the time, SASS will be built into a framework you are using.
- Easiest way to use it stand-alone (in my opinion) is to install the npm package.
npm install sass- This is a slower JavaScript implementation.
- There are faster Dart and C++ implementations.
SASS
Define variables:
SASS SYNTAX
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
Nesting:
SASS SYNTAX
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
SCSS
Define variables:
SCSS SYNTAX
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}