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 ```
 149
 150 The `.scss` or `.sass` extension is optional.
 151
 152 ## Color functions
 153
 154 ### rgba
 155
 156 ```scss
 157 rgb(100, 120, 140)
 158 rgba(100, 120, 140, .5)
 159 rgba($color, .5)
 160 ```
 161
 162 ### Mixing
 163
 164 ```scss
 165 mix($a, $b, 10%)   // 10% a, 90% b
 166 ```
 167
 168 ### Modifying HSLA
 169
 170 ```scss
 171 darken($color, 5%)
 172 lighten($color, 5%)
 173 ```
 174
 175 ```scss
 176 saturate($color, 5%)
 177 desaturate($color, 5%)
 178 grayscale($color)
 179 ```
 180
 181 ```scss
 182 adjust-hue($color, 15deg)
 183 complement($color)    // like adjust-hue(_, 180deg)
 184 invert($color)
 185 ```
 186
 187 ```scss
 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
 191 ```
 192
 193 ### Getting individual values
 194
 195 #### HSLA
 196
 197 ```scss
 198 hue($color)         // → 0deg..360deg
 199 saturation($color)  // → 0%..100%
 200 lightness($color)   // → 0%..100%
 201 alpha($color)       // → 0..1 (aka opacity())
 202 ```
 203
 204 #### RGB
 205
 206 ```scss
 207 red($color)         // → 0..255
 208 green($color)
 209 blue($color)
 210 ```
 211
 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)
 213
 214 ### Adjustments
 215
 216 ```scss
 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)
 222 ```
 223
 224 ```scss
 225 // Changes via percentage
 226 scale-color($color, $lightness: 50%)
 227 ```
 228
 229 ```scss
 230 // Changes one property completely
 231 change-color($color, $hue: 180deg)
 232 change-color($color, $blue: 250)
 233 ```
 234
 235 Supported: `$red` `$green` `$blue` `$hue` `$saturation` `$lightness` `$alpha`
 236
 237 ## Other functions
 238
 239 ### Strings
 240
 241 ```scss
 242 unquote('hello')
 243 quote(hello)
 244 ```
 245
 246 ```scss
 247 to-upper-case(hello)
 248 to-lower-case(hello)
 249 ```
 250
 251 ```scss
 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"
 255 ```
 256
 257 ### Units
 258
 259 ```scss
 260 unit(3em)        // 'em'
 261 unitless(100px)  // false
 262 ```
 263
 264 ### Numbers
 265
 266 ```scss
 267 floor(3.5)
 268 ceil(3.5)
 269 round(3.5)
 270 abs(3.5)
 271 ```
 272
 273 ```scss
 274 min(1, 2, 3)
 275 max(1, 2, 3)
 276 ```
 277
 278 ```scss
 279 percentage(.5)   // 50%
 280 random(3)        // 0..3
 281 ```
 282
 283 ### Misc
 284
 285 ```scss
 286 variable-exists(red)    // checks for $red
 287 mixin-exists(red-text)  // checks for @mixin red-text
 288 function-exists(redify)
 289 ```
 290
 291 ```scss
 292 global-variable-exists(red)
 293 ```
 294
 295 ```scss
 296 selector-append('.menu', 'li', 'a')   // .menu li a
 297 selector-nest('.menu', '&:hover li')  // .menu:hover li
 298 selector-extend(...)
 299 selector-parse(...)
 300 selector-replace(...)
 301 selector-unify(...)
 302 ```
 303
 304 ## Feature checks
 305
 306 ### Feature check
 307
 308 ```scss
 309 feature-exists(global-variable-shadowing)
 310 ```
 311
 312 ### Features
 313
 314 * global-variable-shadowing
 315 * extend-selector-pseudoclass
 316 * units-level-3
 317 * at-error
 318
 319 ## Loops
 320
 321 ### For loops
 322
 323 ```scss
 324 @for $i from 1 through 4 {
 325   .item-#{$i} { left: 20px * $i; }
 326 }
 327 ```
 328
 329 ### Each loops (simple)
 330
 331 ```scss
 332 $menu-items: home about services contact;
 333
 334 @each $item in $menu-items {
 335   .photo-#{$item} {
 336     background: url('images/#{$item}.jpg');
 337   }
 338 }
 339 ```
 340
 341 ### Each loops (nested)
 342 ```scss
 343 $backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
 344
 345 @each $id, $image in $backgrounds {
 346   .photo-#{$id} {
 347     background: url($image);
 348   }
 349 }
 350 ```
 351
 352 ### While loops
 353
 354 ```scss
 355 $i: 6;
 356 @while $i > 0 {
 357   .item-#{$i} { width: 2em * $i; }
 358   $i: $i - 2;
 359 }
 360 ```
 361
 362 ## Other features
 363
 364 ### Conditionals
 365
 366 ```scss
 367 @if $position == 'left' {
 368    position: absolute;
 369    left: 0;
 370 }
 371 @else if $position == 'right' {
 372    position: absolute;
 373    right: 0;
 374 }
 375 @else {
 376    position: static;
 377 }
 378 ```
 379
 380 ### Interpolation
 381
 382 ```scss
 383 .#{$klass} { ... }      // Class
 384 call($function-name)    // Functions
 385
 386 @media #{$tablet}
 387 font: #{$size}/#{$line-height}
 388 url("#{$background}.jpg")
 389 ```
 390
 391 ### Lists
 392
 393 ```scss
 394 $list: (a b c);
 395
 396 nth($list, 1)  // starts with 1
 397 length($list)
 398
 399 @each $item in $list { ... }
 400 ```
 401
 402 ### Maps
 403
 404 ```scss
 405 $map: (key1: value1, key2: value2, key3: value3);
 406
 407 map-get($map, key1)
 408 ```
 409
 410 ## See also
 411 {: .-one-column}
 412
 413 - <http://sass-lang.com/documentation/Sass/Script/Functions.html>
 414 - <http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript>