 Sass Compatibility:

 CSS Dart Sass

SCSS SYNTAX since 1.23.0
nav { LibSass
ul { ✗
margin: 0;
Ruby Sass
padding: 0;
list-style: none; ✗
} ▶

li { display: inline-block; }
You don't have to write all your Sass in a
single file. You can split it up however
a {
display: block; you want with the @use rule. This rule
padding: 6px 12px; loads another Sass file as a module,
text-decoration: none;
} which means you can refer to its
} variables, mixins, and functions in your
CSS OUTPUT Sass file with a namespace based on
nav ul {
margin: 0; the filename. Using a file will also
padding: 0;
list-style: none; include the CSS it generates in your
} compiled output!
nav li {
display: inline-block;  SCSS
}  Sass
nav a {
 CSS
display: block;
padding: 6px 12px; SCSS SYNTAX
text-decoration: none; // _base.scss
} $font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
You'll notice that the ul, li, font: 100% $font-stack;
and a selectors are nested color: $primary-color;
}
inside the nav selector. This is a great // styles.scss
way to organize your CSS and make @use 'base';

it more readable. .inverse {

background-color: base.$primary-color;
Partials color: white;
You can create partial Sass files that }

contain little snippets of CSS that you CSS OUTPUT

body {
can include in other Sass files. This is a font: 100% Helvetica, sans-serif;
color: #333;
great way to modularize your CSS and }
help keep things easier to maintain. A
.inverse {
partial is a Sass file named with a leading background-color: #333;
underscore. You might name }
color: white;

it something like _partial.scss. The Notice we're using @use 'base'; in

underscore lets Sass know that the file
is only a partial file and that it should
not be generated into a CSS file. Sass
partials are used with the @use rule.
Modules
the styles.scss file. When you use a file
you don't need to include the file
extension. Sass is smart and will figure it
out for you.
Mixins
Some things in CSS are a bit tedious to To create a mixin you use
write, especially with CSS3 and the many the @mixin directive and give it a
vendor prefixes that exist. A mixin lets name. We've named our mixin theme.
you make groups of CSS declarations We're also using the
that you want to reuse throughout your variable $theme inside the parentheses so
site. It helps keep your Sass we can pass in a theme of whatever
very DRY. You can even pass in values to we want. After you create your mixin,
make your mixin more flexible. Here's an you can then use it as a CSS declaration
example for theme. starting with @include followed by the
 SCSS name of the mixin.
 Sass
 CSS Extend/Inheritance
SCSS SYNTAX Using @extend lets you share a set
@mixin theme($theme: DarkGray) {
background: $theme; of CSS properties from one selector to
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff; another. In our example we're going to
} create a simple series of messaging for
.info { errors, warnings and successes using
@include theme; another feature which goes hand in
}
.alert { hand with extend, placeholder classes. A
@include theme($theme: DarkRed);
}
placeholder class is a special type of
.success { class that only prints when it is extended,
@include theme($theme: DarkGreen);
} and can help keep your
compiled CSS neat and clean.
 SCSS
 Sass
 CSS

CSS OUTPUT
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, SCSS SYNTAX
169, 0.25); /* This CSS will print because %message-
color: #fff; shared is extended. */
} %message-shared {
border: 1px solid #ccc;
.alert { padding: 10px;
background: DarkRed; color: #333;
box-shadow: 0 0 1px rgba(139, 0, 0, }
0.25);
color: #fff; // This CSS won't print because %equal-
} heights is never extended.
%equal-heights {
.success { display: flex;
background: DarkGreen; flex-wrap: wrap;
box-shadow: 0 0 1px rgba(0, 100, 0, }
0.25);
color: #fff; .message {
} @extend %message-shared;
}

.success {
 @extend %message-shared; @use "sass:math";
border-color: green;
} .container {
display: flex;
.error { }
@extend %message-shared;
border-color: red; article[role="main"] {
} width: math.div(600px, 960px) * 100%;
}
.warning {
@extend %message-shared; aside[role="complementary"] {
border-color: yellow; width: math.div(300px, 960px) * 100%;
} margin-left: auto;
}
What the above code does is
CSS OUTPUT
tells .message, .success, .error, and .warni .container {
ng to behave just like %message-shared. display: flex;
}
That means anywhere that %message-
shared shows article[role="main"] {
width: 62.5%;
up, .message, .success, .error, & .warning }
will too. The magic happens in the aside[role="complementary"] {
generated CSS , where each of these width: 31.25%;
margin-left: auto;
classes will get the same CSS properties }
as %message-shared. This helps you avoid
having to write multiple class names
We've created a very simple fluid grid,
on HTML elements.
based on 960px. Operations in Sass let
You can extend most
us do something like take pixel values
simple CSS selectors in addition
and convert them to percentages
to placeholder classes in Sass, but using
without much hassle.
placeholders is the easiest way to
make sure you aren't extending a class
that's nested elsewhere in your
styles, which can result in unintended
selectors in your CSS. Variables
Note that the CSS in %equal-heights isn't
$red: #833;
generated, because %equal-heights is body {
never extended. color: $red;
}
Operators Nesting
Doing math in your CSS is very helpful. .markdown-body {
Sass has a handful of standard math a{
operators like +, -, *, math.div(), and %. In color: blue;
&:hover {
our example we're going to do some
color: red;
simple math to calculate widths for }
an article and aside. }
 SCSS }
 Sass to properties
text: {
 CSS align: center; // like text-align: center
SCSS SYNTAX
 transform: uppercase; // like text-transform: Instead, we should use the @use rule.
uppercase The .scss or .sass extension is optional.
} #Color functions
Comments
rgba
/* Block comments */
// Line comments rgb(100, 120, 140)
rgba(100, 120, 140, .5)
Mixins rgba($color, .5)
@mixin heading-font { Mixing
font-family: sans-serif;
font-weight: bold; mix($a, $b, 10%) // 10% a, 90% b
} Modifying HSLA
h1 {
@include heading-font; darken($color, 5%)
} lighten($color, 5%)
with parameters saturate($color, 5%)
@mixin font-size($n) { desaturate($color, 5%)
font-size: $n * 1.2em; grayscale($color)
} adjust-hue($color, 15deg)
body { complement($color) // like adjust-hue(_, 180deg)
@include font-size(2); invert($color)
} fade-in($color, .5) // aka opacify()
with default values fade-out($color, .5) // aka transparentize() - halves
@mixin pad($n: 10px) { the opacity
padding: $n; rgba($color, .5) // sets alpha to .5
}
Getting individual values
body {
@include pad(15px); HSLA
} hue($color) // → 0deg..360deg
with a default variable saturation($color) // → 0%..100%
// Set a default value lightness($color) // → 0%..100%
$default-padding: 10px; alpha($color) // → 0..1 (aka opacity())
@mixin pad($n: $default-padding) { RGB
padding: $n; red($color) // → 0..255
} green($color)
body { blue($color)
@include pad(15px); See: hue(), red()
}
Adjustments
Extend
// Changes by fixed amounts
.button { adjust-color($color, $blue: 5)
··· adjust-color($color, $lightness: -30%) // like
} darken(_, 30%)
.push-button { adjust-color($color, $alpha: -0.4) // like fade-
@extend .button; out(_, .4)
} adjust-color($color, $hue: 30deg) // like adjust-
Composing hue(_, 15deg)
// Changes via percentage
@import './other_sass_file'; scale-color($color, $lightness: 50%)
@use './other_sass_file'; // Changes one property completely
The @import rule is discouraged because will get change-color($color, $hue: 180deg)
eventually removed from the language. change-color($color, $blue: 250)
Supported: $red $green $blue $hue $saturation $ligh feature-exists(global-variable-shadowing)
tness $alpha Features
#Other functions
global-variable-shadowing
extend-selector-pseudoclass
units-level-3
at-error
Strings
For loops
unquote('hello')
@for $i from 1 through 4 {
quote(hello)
.item-#{$i} { left: 20px * $i; }
to-upper-case(hello)
}
to-lower-case(hello)
str-length(hello world) Each loops (simple)
str-slice(hello, 2, 5) // "ello" - it's 1-based, not 0-
based $menu-items: home about services contact;
str-insert("abcd", "X", 1) // "Xabcd"
@each $item in $menu-items {
Units .photo-#{$item} {
background: url('images/#{$item}.jpg');
unit(3em) // 'em'
}
unitless(100px) // false
}
Numbers
Each loops (nested)
floor(3.5)
$backgrounds: (home, 'home.jpg'), (about,
ceil(3.5)
'about.jpg');
round(3.5)
abs(3.5)
@each $id, $image in $backgrounds {
min(1, 2, 3)
.photo-#{$id} {
max(1, 2, 3)
background: url($image);
percentage(.5) // 50%
}
random(3) // 0..3
}
Misc
While loops
variable-exists(red) // checks for $red
$i: 6;
mixin-exists(red-text) // checks for @mixin red-text
@while $i > 0 {
function-exists(redify)
.item-#{$i} { width: 2em * $i; }
global-variable-exists(red)
$i: $i - 2;
selector-append('.menu', 'li', 'a') // .menu li a
}
selector-nest('.menu', '&:hover li') // .menu:hover li
selector-extend(...)
selector-parse(...)
selector-replace(...)
selector-unify(...)
Conditionals

@if $position == 'left' {

position: absolute;
left: 0;
}
@else if $position == 'right' {
position: absolute;
right: 0;
Feature check
}
@else {
 position: static;
}
Interpolation

.#{$klass} { ... } // Class

call($function-name) // Functions

@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")
Lists

$list: (a b c);

nth($list, 1) // starts with 1

length($list)

@each $item in $list { ... }

Maps

$map: (key1: value1, key2: value2, key3: value3);

map-get($map, key1)