sass.md

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