Sass总结（二）

控制指令

Sass中可使用条件控制指令和循环控制指令。

@if指令

$type: left;
.hand {
  @if $type == right {
    color: red;
  } @else if $type == left {
    color: blue;
  }@else {
    color: white;
  }
}
//编译后
.hand {
  color: blue; }

@for指令

@for指令有两种形式，一种是@for $var from to ，另一种是@for $var from through 。
@for $var from through 示例

.hand {
  @for $i from 1 through 3 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }
}
//编译后
.hand .border-1 {
  border: 1px solid blue; }
.hand .border-2 {
  border: 2px solid blue; }
.hand .border-3 {
  border: 3px solid blue; }

@for $var from to 示例

.hand {
  @for $i from 1 to 3 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }
}
//编译后
.hand .border-1 {
  border: 1px solid blue; }
.hand .border-2 {
  border: 2px solid blue; }

从上面的两个例子中可以发现，@for $var from through 包含和，而@for $var from to 从开始执行，但不包含的值。

@while指令

$i:3;
@while $i > 0 {
  .item-#{$i} {
    border-width: 2px * $i;
  }
  $i: $i - 1;
}
//编译后
.item-3 {
  border-width: 6px; }
.item-2 {
  border-width: 4px; }
.item-1 {
  border-width: 2px; }

@each指令

@each $member in logo, icon, banner {
  .#{$member}-img {
    background-image: url('/images/#{$member}.png');
  }
}
//编译后
.logo-img {
  background-image: url("/images/logo.png"); }
.icon-img {
  background-image: url("/images/icon.png"); }
.banner-img {
  background-image: url("/images/banner.png"); }

函数

Sass提供了部分内置函数，也允许用户自定义函数。

内置函数

Sass中内置了有关颜色、字符串和数字等有关的函数，以颜色函数为例。

.error {
  color: lighten(#000, 10%);
  background-color: darken(#fff, 10%) ;
}
//编译后
.error {
  color: #1a1a1a;
  background-color: #e6e6e6; }

自定义函数

Sass中允许用户使用@function自定义函数。

@function widther($n) {
    @return $n + 2px;
}
.error {
  border-width: widther(1px);
}
//编译后
.error {
  border-width: 3px; }

注释

Sass中有两种注释，一种与css的标准注释格式相同/.../（多行注释），另一种是静默注释，也叫单行注释，是以//开头的。

//采用链式继承
/* 采用链式继承-by gj*/
.error {
  color: red;
}
//编译后
/* 采用链式继承-by gj*/
.error {
  color: red; }

可以看出，Sass中的静默注释，在编译后的css文件中是不存在的，而Sass中的多行注释，编译后依然存在。因此，那些只是为了给自己看的注释，需要使用静默注释。