13 - "@for @each @while @if @else"
15 - "$map: (a: b, c: d)"
24 This is a quick reference to [Sass stylesheets](https://sass-lang.com).
26 - [Sass documentation](https://sass-lang.com/documentation) _(sass-lang.com)_
56 align: center; // like text-align: center
57 transform: uppercase; // like text-transform: uppercase
72 font-family: sans-serif;
79 @include heading-font;
86 @mixin font-size($n) {
87 font-size: $n * 1.2em;
93 @include font-size(2);
97 #### with default values
100 @mixin pad($n: 10px) {
111 #### with a default variable
114 // Set a default value
115 $default-padding: 10px;
119 @mixin pad($n: $default-padding) {
147 @import './other_sass_file';
148 @use './other_sass_file';
151 The `@import` rule is discouraged because will get eventually [removed from the language](https://sass-lang.com/documentation/at-rules/import).
152 Instead, we should use the [`@use` rule](https://sass-lang.com/documentation/at-rules/use).
153 The `.scss` or `.sass` extension is optional.
161 rgba(100, 120, 140, .5)
168 mix($a, $b, 10%) // 10% a, 90% b
180 desaturate($color, 5%)
185 adjust-hue($color, 15deg)
186 complement($color) // like adjust-hue(_, 180deg)
191 fade-in($color, .5) // aka opacify()
192 fade-out($color, .5) // aka transparentize() - halves the opacity
193 rgba($color, .5) // sets alpha to .5
196 ### Getting individual values
201 hue($color) // → 0deg..360deg
202 saturation($color) // → 0%..100%
203 lightness($color) // → 0%..100%
204 alpha($color) // → 0..1 (aka opacity())
210 red($color) // → 0..255
215 See: [hue()](http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method), [red()](http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method)
220 // Changes by fixed amounts
221 adjust-color($color, $blue: 5)
222 adjust-color($color, $lightness: -30%) // like darken(_, 30%)
223 adjust-color($color, $alpha: -0.4) // like fade-out(_, .4)
224 adjust-color($color, $hue: 30deg) // like adjust-hue(_, 15deg)
228 // Changes via percentage
229 scale-color($color, $lightness: 50%)
233 // Changes one property completely
234 change-color($color, $hue: 180deg)
235 change-color($color, $blue: 250)
238 Supported: `$red` `$green` `$blue` `$hue` `$saturation` `$lightness` `$alpha`
255 str-length(hello world)
256 str-slice(hello, 2, 5) // "ello" - it's 1-based, not 0-based
257 str-insert("abcd", "X", 1) // "Xabcd"
264 unitless(100px) // false
282 percentage(.5) // 50%
289 variable-exists(red) // checks for $red
290 mixin-exists(red-text) // checks for @mixin red-text
291 function-exists(redify)
295 global-variable-exists(red)
299 selector-append('.menu', 'li', 'a') // .menu li a
300 selector-nest('.menu', '&:hover li') // .menu:hover li
303 selector-replace(...)
312 feature-exists(global-variable-shadowing)
317 * global-variable-shadowing
318 * extend-selector-pseudoclass
327 @for $i from 1 through 4 {
328 .item-#{$i} { left: 20px * $i; }
332 ### Each loops (simple)
335 $menu-items: home about services contact;
337 @each $item in $menu-items {
339 background: url('images/#{$item}.jpg');
344 ### Each loops (nested)
346 $backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
348 @each $id, $image in $backgrounds {
350 background: url($image);
360 .item-#{$i} { width: 2em * $i; }
370 @if $position == 'left' {
374 @else if $position == 'right' {
386 .#{$klass} { ... } // Class
387 call($function-name) // Functions
390 font: #{$size}/#{$line-height}
391 url("#{$background}.jpg")
399 nth($list, 1) // starts with 1
402 @each $item in $list { ... }
408 $map: (key1: value1, key2: value2, key3: value3);
416 - <http://sass-lang.com/documentation/Sass/Script/Functions.html>
417 - <http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript>