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';
150 The `.scss` or `.sass` extension is optional.
158 rgba(100, 120, 140, .5)
165 mix($a, $b, 10%) // 10% a, 90% b
177 desaturate($color, 5%)
182 adjust-hue($color, 15deg)
183 complement($color) // like adjust-hue(_, 180deg)
188 fade-in($color, .5) // aka opacify()
189 fade-out($color, .5) // aka transparentize() - halves the opacity
190 rgba($color, .5) // sets alpha to .5
193 ### Getting individual values
198 hue($color) // → 0deg..360deg
199 saturation($color) // → 0%..100%
200 lightness($color) // → 0%..100%
201 alpha($color) // → 0..1 (aka opacity())
207 red($color) // → 0..255
212 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)
217 // Changes by fixed amounts
218 adjust-color($color, $blue: 5)
219 adjust-color($color, $lightness: -30%) // like darken(_, 30%)
220 adjust-color($color, $alpha: -0.4) // like fade-out(_, .4)
221 adjust-color($color, $hue: 30deg) // like adjust-hue(_, 15deg)
225 // Changes via percentage
226 scale-color($color, $lightness: 50%)
230 // Changes one property completely
231 change-color($color, $hue: 180deg)
232 change-color($color, $blue: 250)
235 Supported: `$red` `$green` `$blue` `$hue` `$saturation` `$lightness` `$alpha`
252 str-length(hello world)
253 str-slice(hello, 2, 5) // "ello" - it's 1-based, not 0-based
254 str-insert("abcd", "X", 1) // "Xabcd"
261 unitless(100px) // false
279 percentage(.5) // 50%
286 variable-exists(red) // checks for $red
287 mixin-exists(red-text) // checks for @mixin red-text
288 function-exists(redify)
292 global-variable-exists(red)
296 selector-append('.menu', 'li', 'a') // .menu li a
297 selector-nest('.menu', '&:hover li') // .menu:hover li
300 selector-replace(...)
309 feature-exists(global-variable-shadowing)
314 * global-variable-shadowing
315 * extend-selector-pseudoclass
324 @for $i from 1 through 4 {
325 .item-#{$i} { left: 20px * $i; }
329 ### Each loops (simple)
332 $menu-items: home about services contact;
334 @each $item in $menu-items {
336 background: url('images/#{$item}.jpg');
341 ### Each loops (nested)
343 $backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
345 @each $id, $image in $backgrounds {
347 background: url($image);
357 .item-#{$i} { width: 2em * $i; }
367 @if $position == 'left' {
371 @else if $position == 'right' {
383 .#{$klass} { ... } // Class
384 call($function-name) // Functions
387 font: #{$size}/#{$line-height}
388 url("#{$background}.jpg")
396 nth($list, 1) // starts with 1
399 @each $item in $list { ... }
405 $map: (key1: value1, key2: value2, key3: value3);
413 - <http://sass-lang.com/documentation/Sass/Script/Functions.html>
414 - <http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript>