Sass高级用法(2)

上篇文章我们介绍了Sass的日常使用方法，今天我们来介绍Sass的高级用法，这将会颠覆你对写css的印象。

条件语句

判断：@if 和@else
当 @if 的表达式返回值是true时，则输出 {} 内的代码

div {
  @if 1 + 1 == 2 { border: 1px #ccc solid; }
  @if 5 < 3 { border: 2px #f00 solid; }
}

//编译为

div {
  border: 1px #ccc solid; 
}

@if和@else可搭配在一起使用

$type: sass;
p {
  @if $type == css { color: blue; }
  @else $type == sass { color: red; } 
}
 
//编译为

p { color: red; }

循环语句

@for：有两种格式，@for $var from <start> through <end>，或者 @for $var from <start> to <end>。

@for $num from 1 through 3 {
  .list-#{$num} { width: 200px * $num; }
}

//编译为

.list-1 { width: 200px; }
.list-2 { width: 400px; }
.list-3 { width: 600px; }

如果将上面的例子换为@for $num from 1 to 3会出现什么结果呢

@for $num from 1 to 3 {
  .list-#{$num} { width: 200px * $num; }
}

//编译为

.list-1 { width: 200px; }
.list-2 { width: 400px; }

我们会发现：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。
另外，$var 可以是任何变量；<start> 和 <end> 必须是整数值。

@while：指令重复输出格式直到表达式返回结果为 false。

$num: 6;
@while $num > 0 {
  .list-#{$num} { width: 200px * $num; }
  $num: $num - 2;
}

//编译为

.list-6 { width: 1200px; }
.list-4 { width: 800px; }
.list-2 { width: 400px; }

@each：指令的格式是 $var in <list>, $var 可以是任何变量名，<list> 是一连串的值，也就是值列表。@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果。

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
//编译为

.a { background-image: url("/image/a.jpg"); }
.b { background-image: url("/image/b.jpg"); }
.c { background-image: url("/image/c.jpg"); }

自定义函数

在sass中，用于可以根据自己的具体需要编写函数

@function count($n) {
  @return $n * 100;
}
div {
  width: count(5px);
}

//编译后

div { width: 500px; }