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