SASS 语法

变量

$color: #fff;
body {
  color: $color;
}

嵌套

.container {
  h1 {
    color: #fff;
  }
}

运算

body {
  width: 100px + 50px;
}

继承

%color-red {
  color: red;
}

.text {
  @extend %color-red;
}

// 输出：
.text {
  color: red;
}

混合

@mixin border-radius($radius) {
  border-radius: $radius;
}

// 使用混合
.box {
  @include border-radius(10px);
}

插值

$name: foo;
#{$name} {
  color: blue;
}

// 输出：
foo {
  color: blue;
}

函数

@function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px); // 10px
}

条件语句

@if lightness($color) >= 50% {
  background-color: #000;
} @else {
  background-color: #fff;
}

循环语句

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
// 输出：
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }