Sass教程十一：Sass知识点之 —— 控制指令

 

Sass 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用

@if

@if用于定义一些条件，当输入的值满足条件时做对应的事情 当@if 的表达式成立时，输出 {} 内的代码：

p{
    @if 1 + 1 == 2 { width: 20px }
}

在这段代码中 1 + 1 == 2这个表达式无疑是成立的，通俗解释就是 1+1是否等于2 (中间的两个等号代表：是否等于 的意思) 这个表达式成立，那么后面 {}里的代码才会被输出 编译过后得到：

p{
    width: 20px;
}

这里涉及到了Sass中的运算： 

Sass中支持所有数字的加减乘除 以及取整等运算 其运算符分别是：

• 相加 +
• 相减 -
• 相乘 *
• 相除 /
• 取整 %

并且当两个值之间的单位不统一时会进行有限的单位转换，如：

p{
    width: 2 * 20px;
}

编译成：
p{
    width: 40px;
}

但是当两个值都带有单位，并且单位不统一的时候Sass就处理不了了，尽量不要写这样的代码：

p{
    width: 2em * 20px;
}

另外，关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。 因为”/“号有时候会用作分号而不是除号，所以用的时候要注意：

1.不相除

.main{
  width: 120px/2;
}

编译过后：
.main{
  width: 120px/2;
}

加括号可以解决问题：
.main{
  width: (120px/2);
}

2.单位消除

.main{
  width: (120px/2px);
}

编译过后：
.main{
  width: 60;
}

解决方法：尽量不要让运算的两边都带单位

3.font复合样式：考虑到移动端布局需要替换单位，我们可能会这么写：

$rem: 30rem;
p{
  font: 120px/$rem / 30px/$rem Arial;
}
首先，除号两边都带有单位，且不统一，会直接报错。所以变量的值里尽量不要带有单位 


解决方法：
$rem: 30;
p{
  font: #{(120rem/$rem)} / (30rem/$rem) Arial;
}

编译过后：
p {
  font: 4rem / 1rem Arial;
}

以上代码中用到了插值语句： #{} 通过插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
.#{$name} {
  #{$attr}-color: blue;
}

编译过后：
.foo {
  border-color: blue;
}

可以在选择器名中使用变量，这将是一个非常好用的功能，以后会用到，现在继续讲控制指令：

@for 循环

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for $var from to ，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。另外，$var 可以是任何变量，比如 $i； 和 必须是整数值。

比如：

@for $num from 1 through 3 {
  .item{
    width:$num * 3px;
  }
}

编译过后：
.item {
  width: 3px;
}

.item {
  width: 6px;
}

.item {
  width: 9px;
}

从以上代码可以看出 .item 被循环输出了 3次 。并且每一次 变量 $num 的值都不一样，可以看出分别是 1，2，3 这也正好符合 from 1 through 3 的设定，从1 到3。 那么这时候再反过来看 @for 控制指令就比较好理解了，稍微复杂一点，我们还可以把 $num 变量用到选择器名称里面，这样的话就不至于输出的选择器是一样的了。还记得刚才在上面提到过的插值语句么？没错了，就是它：#{} 

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

编译之后：
.item1 {
   width: 3px;
 }

.item2 {
  width: 6px;
}

.item3 {
  width: 9px;
}

ok 现在我们利用@for一次性生成了3个选择器，当然我们可以生成更多，比如考虑以下案例：

在用css来实现的情况下，代码如下：

.box{
  width: 200px;
  height: 200px;
  border: 1px solid #899;
  border-radius: 50%;
  position: relative;

  .item{
    width: 2px;
    height: 10px;
    background: #899;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  @for $num from 1 through 12 {
    .item:nth-child(#{$num}){
      transform: rotate((360deg/12)*$num) translateY(-96px);
    }
  }
}

编译过后的代码大家可能也猜到了，所以也就不放在这里了

该案例可以在这里看到

@each

@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译后：

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

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

编译后：

item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

可以看到while的功能和 @for 差不多的，只是 @while可以根据一定的规则进行循环，而不是递增或者递减