본문으로 건너뛰기

SASS/SCSS

https://sass-lang.com/

Cheat sheet​

Comments​

/* Block comments */
// Line comments

Extend​

%button {
  ···
}

.push-button {
  @extend %button;
}

Variables​

$red: #833;

body {
  color: $red;
}

Mixins​

@mixin heading-font {
  font-family: sans-serif;
  font-weight: bold;
}

h1 {
  @include heading-font;
}
with parameters
@mixin font-size($n) {
  font-size: $n * 1.2em;
}

body {
  @include font-size(2);
}
default values
@mixin pad($n: 10px) {
  padding: $n;
}

body {
  @include pad(15px);
}
default variable
// Set a default value
$default-padding: 10px;

@mixin pad($n: $default-padding) {
  padding: $n;
}

body {
  @include pad(15px);
}

Nesting​

.markdown-body {
  a {
    color: blue;
    &:hover {
      color: red;
    }
  }
}

text: {
  align: center;          // like text-align: center
  transform: uppercase;   // like text-transform: uppercase
}

Composing​

@import './other_sass_file';  // discouraged
@use './other_sass_file';

Loops​

For​

@for $i from 1 through 4 {
  .item-#{$i} { left: 20px * $i; }
}

Each​

$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');

@each $id, $image in $backgrounds {
  .photo-#{$id} {
    background: url($image);
  }
}
$menu-items: home about services contact;

@each $item in $menu-items {
  .photo-#{$item} {
    background: url('images/#{$item}.jpg');
  }
}

While​

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

Conditionals​

@if $position == 'left' {
   position: absolute;
   left: 0;
}
@else if $position == 'right' {
   position: absolute;
   right: 0;
}
@else {
   position: static;
}

Etc​

Lists​

$list: (a b c);

nth($list, 1)  // starts with 1
length($list)

@each $item in $list { ... }

Maps​

$map: (key1: value1, key2: value2, key3: value3);

map-get($map, key1)

Inpterpolation​

.#{$klass} { ... }      // Class
call($function-name)    // Functions

@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")