Sass

变量

$main-fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

函数

CSS 的新功能需要一段时间适配后，所有浏览器后才能完全使用。随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。比如 "box-shadow":

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

 

对于所有具有box-shadow属性的元素重写此规则，或者更改每个值以测试不同的效果，需要花费大量的精力。

Mixins就像 CSS 的函数。以下是一个例子：

@mixin box-shadow($x, $y, $blur, $c){
  -webkit-box-shadow: $x, $y, $blur, $c;
  -moz-box-shadow: $x, $y, $blur, $c;
  -ms-box-shadow: $x, $y, $blur, $c;
  box-shadow: $x, $y, $blur, $c;
}

定义以@mixin开头，后跟自定义名称。参数（$x，$y，$blur，以及上例中的$c是可选的。

现在，只要在需要的地方使用@include调用上面定义的mixin，就可以自动添加好所有的浏览器前缀：mixin使用@include指令调用：

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

-----------

@mixin make-bold($bool) {
  @if $bool == true {
    font-weight: bold;
  }
}

@else if以及@else类似

------------

循环

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

#{$i}部分是将变量（i）与文本组合成字符串的语法。当 Sass 文件转换为 CSS 时，它看起来像这样：

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;

------------------

Sass 还提供@each指令，该指令循环遍历列表或映射中的每个项目。

<style type='text/sass'>
  @each $color in blue,black,red {
  .#{$color}-bg {background-color:$color;}
  }
  
  
  div {
    height: 200px;
    width: 200px;
  }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

-------------

@while。

$x: 1;
@while $x< 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

----------------------------

Sass 有一个名为extend的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们