sass.md

   1 ---
   2 title: Sass
   3 category: CSS
   4 layout: 2017/sheet
   5 tags: [Featured]
   6 updated: 2020-07-03
   7 weight: -5
   8 keywords:
   9   - Variables
  10   - mixins
  11   - darken()
  12   - adjust-color()
  13   - "@for @each @while @if @else"
  14   - "$list: (a b c)"
  15   - "$map: (a: b, c: d)"
  16 ---
  17
  18 ## Basics
  19 {: .-three-column}
  20
  21 ### Introduction
  22 {: .-intro}
  23
  24 This is a quick reference to [Sass stylesheets](https://sass-lang.com).
  25
  26 - [Sass documentation](https://sass-lang.com/documentation) _(sass-lang.com)_
  27
  28 ### Variables
  29
  30 ```scss
  31 $red: #833;
  32 ```
  33
  34 ```scss
  35 body {
  36   color: $red;
  37 }
  38 ```
  39
  40 ### Nesting
  41
  42 ```scss
  43 .markdown-body {
  44   a {
  45     color: blue;
  46     &:hover {
  47       color: red;
  48     }
  49   }
  50 }
  51 ```
  52
  53 #### to properties
  54 ```scss
  55 text: {
  56   align: center;          // like text-align: center
  57   transform: uppercase;   // like text-transform: uppercase
  58 }
  59 ```
  60
  61 ### Comments
  62
  63 ```scss
  64 /* Block comments */
  65 // Line comments
  66 ```
  67
  68 ### Mixins
  69
  70 ```scss
  71 @mixin heading-font {
  72   font-family: sans-serif;
  73   font-weight: bold;
  74 }
  75 ```
  76
  77 ```scss
  78 h1 {
  79   @include heading-font;
  80 }
  81 ```
  82
  83 #### with parameters
  84
  85 ```scss
  86 @mixin font-size($n) {
  87   font-size: $n * 1.2em;
  88 }
  89 ```
  90
  91 ```scss
  92 body {
  93   @include font-size(2);
  94 }
  95 ```
  96
  97 #### with default values
  98
  99 ```scss
 100 @mixin pad($n: 10px) {
 101   padding: $n;
 102 }
 103 ```
 104
 105 ```scss
 106 body {
 107   @include pad(15px);
 108 }
 109 ```
 110
 111 #### with a default variable
 112
 113 ```scss
 114 // Set a default value
 115 $default-padding: 10px;
 116 ```
 117
 118 ```scss
 119 @mixin pad($n: $default-padding) {
 120   padding: $n;
 121 }
 122 ```
 123
 124 ```scss
 125 body {
 126   @include pad(15px);
 127 }
 128 ```
 129
 130 ### Extend
 131
 132 ```scss
 133 .button {
 134   ···
 135 }
 136 ```
 137
 138 ```scss
 139 .push-button {
 140   @extend .button;
 141 }
 142 ```
 143
 144 ### Composing
 145
 146 ```scss
 147 @import './other_sass_file';
 148 @use './other_sass_file';
 149 ```
 150
 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.
 154
 155 ## Color functions
 156
 157 ### rgba
 158
 159 ```scss
 160 rgb(100, 120, 140)
 161 rgba(100, 120, 140, .5)
 162 rgba($color, .5)
 163 ```
 164
 165 ### Mixing
 166
 167 ```scss
 168 mix($a, $b, 10%)   // 10% a, 90% b
 169 ```
 170
 171 ### Modifying HSLA
 172
 173 ```scss
 174 darken($color, 5%)
 175 lighten($color, 5%)
 176 ```
 177
 178 ```scss
 179 saturate($color, 5%)
 180 desaturate($color, 5%)
 181 grayscale($color)
 182 ```
 183
 184 ```scss
 185 adjust-hue($color, 15deg)
 186 complement($color)    // like adjust-hue(_, 180deg)
 187 invert($color)
 188 ```
 189
 190 ```scss
 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
 194 ```
 195
 196 ### Getting individual values
 197
 198 #### HSLA
 199
 200 ```scss
 201 hue($color)         // → 0deg..360deg
 202 saturation($color)  // → 0%..100%
 203 lightness($color)   // → 0%..100%
 204 alpha($color)       // → 0..1 (aka opacity())
 205 ```
 206
 207 #### RGB
 208
 209 ```scss
 210 red($color)         // → 0..255
 211 green($color)
 212 blue($color)
 213 ```
 214
 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)
 216
 217 ### Adjustments
 218
 219 ```scss
 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)
 225 ```
 226
 227 ```scss
 228 // Changes via percentage
 229 scale-color($color, $lightness: 50%)
 230 ```
 231
 232 ```scss
 233 // Changes one property completely
 234 change-color($color, $hue: 180deg)
 235 change-color($color, $blue: 250)
 236 ```
 237
 238 Supported: `$red` `$green` `$blue` `$hue` `$saturation` `$lightness` `$alpha`
 239
 240 ## Other functions
 241
 242 ### Strings
 243
 244 ```scss
 245 unquote('hello')
 246 quote(hello)
 247 ```
 248
 249 ```scss
 250 to-upper-case(hello)
 251 to-lower-case(hello)
 252 ```
 253
 254 ```scss
 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"
 258 ```
 259
 260 ### Units
 261
 262 ```scss
 263 unit(3em)        // 'em'
 264 unitless(100px)  // false
 265 ```
 266
 267 ### Numbers
 268
 269 ```scss
 270 floor(3.5)
 271 ceil(3.5)
 272 round(3.5)
 273 abs(3.5)
 274 ```
 275
 276 ```scss
 277 min(1, 2, 3)
 278 max(1, 2, 3)
 279 ```
 280
 281 ```scss
 282 percentage(.5)   // 50%
 283 random(3)        // 0..3
 284 ```
 285
 286 ### Misc
 287
 288 ```scss
 289 variable-exists(red)    // checks for $red
 290 mixin-exists(red-text)  // checks for @mixin red-text
 291 function-exists(redify)
 292 ```
 293
 294 ```scss
 295 global-variable-exists(red)
 296 ```
 297
 298 ```scss
 299 selector-append('.menu', 'li', 'a')   // .menu li a
 300 selector-nest('.menu', '&:hover li')  // .menu:hover li
 301 selector-extend(...)
 302 selector-parse(...)
 303 selector-replace(...)
 304 selector-unify(...)
 305 ```
 306
 307 ## Feature checks
 308
 309 ### Feature check
 310
 311 ```scss
 312 feature-exists(global-variable-shadowing)
 313 ```
 314
 315 ### Features
 316
 317 * global-variable-shadowing
 318 * extend-selector-pseudoclass
 319 * units-level-3
 320 * at-error
 321
 322 ## Loops
 323
 324 ### For loops
 325
 326 ```scss
 327 @for $i from 1 through 4 {
 328   .item-#{$i} { left: 20px * $i; }
 329 }
 330 ```
 331
 332 ### Each loops (simple)
 333
 334 ```scss
 335 $menu-items: home about services contact;
 336
 337 @each $item in $menu-items {
 338   .photo-#{$item} {
 339     background: url('images/#{$item}.jpg');
 340   }
 341 }
 342 ```
 343
 344 ### Each loops (nested)
 345 ```scss
 346 $backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
 347
 348 @each $id, $image in $backgrounds {
 349   .photo-#{$id} {
 350     background: url($image);
 351   }
 352 }
 353 ```
 354
 355 ### While loops
 356
 357 ```scss
 358 $i: 6;
 359 @while $i > 0 {
 360   .item-#{$i} { width: 2em * $i; }
 361   $i: $i - 2;
 362 }
 363 ```
 364
 365 ## Other features
 366
 367 ### Conditionals
 368
 369 ```scss
 370 @if $position == 'left' {
 371    position: absolute;
 372    left: 0;
 373 }
 374 @else if $position == 'right' {
 375    position: absolute;
 376    right: 0;
 377 }
 378 @else {
 379    position: static;
 380 }
 381 ```
 382
 383 ### Interpolation
 384
 385 ```scss
 386 .#{$klass} { ... }      // Class
 387 call($function-name)    // Functions
 388
 389 @media #{$tablet}
 390 font: #{$size}/#{$line-height}
 391 url("#{$background}.jpg")
 392 ```
 393
 394 ### Lists
 395
 396 ```scss
 397 $list: (a b c);
 398
 399 nth($list, 1)  // starts with 1
 400 length($list)
 401
 402 @each $item in $list { ... }
 403 ```
 404
 405 ### Maps
 406
 407 ```scss
 408 $map: (key1: value1, key2: value2, key3: value3);
 409
 410 map-get($map, key1)
 411 ```
 412
 413 ## See also
 414 {: .-one-column}
 415
 416 - <http://sass-lang.com/documentation/Sass/Script/Functions.html>
 417 - <http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript>