SASS进阶1

2015年10月21日

@if

@if指令是一个SassScript，它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块。在Sass中除了@if之外，还可以配合@else if 和 @else 一起使用。

假设要控制一个元素隐藏或显示，我们可以定义一个混合宏，通过@if...@else...来判断传进参数的值来控制display的值。如下所示：

//SCSS
@mixin blockOrHidden($boolean:true){
      @if $boolean{
              @debug "$boolean is #{$boolean}";
                display: block;
          }
        @else{
              @debug: "$boolean is #{$boolean}";
              display: none;
            }
}
.block{
      @include blockOrHidden;
}
.hidden{
    @include blockOrHidden(false);
}

编译出来的CSS：

.block{
    display: block;
}
.hidden{
    display: none;
}

for循环（上）

在制作网格系统的时候，大家应该对.col1~.col12这样的印象较深。在CSS中你需要一个一个去书写，但在Sass中，可以使用@for循环来完成。在Sass的@for循环中有两种方式：

@for $i from <start> through <end>
@for $i from <start> to <end>

a）$i表示变量
b）start表示起始值
c）end表示结束值

这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

如下代码，先来个使用through关键字的例子：

@for $i from 1 through 3{
      .item-#{$i} {width: 2em * $i;}
}

编译出来的CSS：

.item-1{
    width: 2em;
}
.item-2{
    width: 4em;
}
.item-3{
    width: 6em;
}

再来个to关键字的例子：

@for $i from 1 to 3{
      .item-#{$i} { width: 2em * $i; }
}

编译出来的CSS：

.item-1{
    width: 2em;
}
.item-2{
    width: 4em;
}

for循环（下）

@for应用在网格系统生成各个格子class的代码：

//SCSS
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid{
    float: left;
    margin-left: $grid-gutter / 2;
    margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12{
      .#{$grid-prefix}#{ $i }{
                  width: $grid-width * $i + $grid-gutter * ($i - 1);
                  @extend %grid;
          }
}

编译出来的CSS：

.span1, .span2, .span3, .span4, .span5,
.span6, .span7, .span8, .span9, .span10,
.span11, .span12{
      float: left;
      margin-left: 10px;
      margin-right: 10px;
}
.span1{
    width: 60px;
}
.span2{
    width: 140px;
}
.span3{
    width: 220px;
}
.span4{
    width: 300px;
}
.span5{
    width: 380px;
}
.span6{
    width: 460px;
}
.span7{
    width: 540px;
}
.span8{
    width: 620px;
}
.span9{
    width: 700px;
}
.span10{
    width: 780px;
}
.span11{
    width: 860px;
}
.span12{
    width: 940px;
}

将上面的示例稍作修改，将@for through 方式换成 @for to: :

//SCSS
@for $i from 1 to 13 {
    .#{$grid-prefix}#{$i}{
            width: $grid-width * $i + $grid-gutter * ($i - 1);
            @extend %grid;
        }
}

最终编译出来的CSS代码和上例所编译出来的一模一样。

这两段Sass代码并无太多差别，只是@for中的<end>取值不同。配合through的<end>值是12，其遍历出来的终点值是13，其遍历出来的终点值是12，就是<end>对就的值减去1。

while循环

@while指令也需要SassScript表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。示例：

//SCSS
$types: 4;
$type-width: 20px;
@while $type > 0 {
    .while-#{$types}{
            width: $type-width + $types;
      }
      $types: $type - 1;
}

编译出来的CSS：

.while-4{
    width: 24px;
}
.while-3{
    width: 23px;
}
.while-2{
    width: 22px;
}
.while-1{
    width: 21px;
}

each循环

@each循环就是去遍历一个列表，然后从列表中取出对应的值。

@each 循环指令的形式：

@each $var in <list>

如果你没有接触过列表，也不要紧，他也非常简单。

在下面的例子中你可以看到，$var就是一个变量名，<list> 是一个SassScript表达式，他将返回一个列表值。变量$var 会在列表中做遍历，并且遍历出与$var对应的样式块。
示例：

$list: adam john wynn mason kuroir;  //$list就是一个列表
@mixin author-images{
      @each $author in $list{
              .photo-#{$author}{
                     background: url("/images/avatars/#{$author}.png") no-repeat; 
               }
        }
}
.author-bio{
      @include author-images;
}

编译出CSS：
.author-bio .photo-adam{
background: url("/images/avatars/adam.png") no-repeat;
}
.author-bio .photo-john{
background: url("/images/avatars/john.png") no-repeat;
}
.author-bio .photo-wynn{
background: url("/images/avatars/wynn.png") no-repeat;
}
.author-bio .photo-mason{
background: url("/images/avatars/mason.png") no-repeat;
}
.author-bio .photo-kurior{
background: url("/images/avatars/kurior") no-repeat;
}

Sass的函数简介

在Sass中除了可以定义变量，具有@extend、%placeholder和mixins等特性之外，还自备了一系列的函数功能。其主要包括：
a）字符串函数
b）数字函数
c）列表函数
d）颜色函数
e）Introspection函数
f）三元函数等

当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数。
下面将给大家详细介绍前 4 种最常用的函数。

字符串函数-unquote()函数

字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：
a）unquote($string)：删除字符串中的引号；
b）quote($string)：给字符串添加引号。

1.unquote( )函数
unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。简单的使用终端来测试这个函数的运行结果：

//SCSS
.test1 {
    content:  unquote('Hello Sass!') ;
}
.test2 {
    content: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}

编译后的 css 代码：

//CSS
.test1 {
  content: Hello Sass!; }

.test2 {
  content: 'Hello Sass!; }

.test3 {
  content: I'm Web Designer; }

.test4 {
  content: 'Hello Sass!'; }

.test5 {
  content: "Hello Sass!"; }

.test6 {
  content: Hello Sass; }

注意：从测试的效果中可以看出，unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。