Sass学习笔记（二）

上周学习了一些基础，这周更深入的学习一下，你会发现和CSS相比写样式的时候6到飞~ 

1.条件语句

@if类似与JavaScript中的if,条件为true返回一堆代码块，为false返回另一个代码块。同样可以与@else , @else if结合使用。

$boolean: true ; 
p{
   @if $boolean{
       display:block;
   } @else {
      display:none;
   }
}

//编译后
p{display:block;}

 

2.循环语句

@for类似与JavaScript中的for循环，不过语法稍有不同，它有两种形式。
（1）第一种形式从<start>开始循环，到<end>结束。

 @for $var from <start> through <end>

例子

@for $item from 1 through 3 {
   .test-#{$item} { height:5px * $item ;}
}

//编译后
.test-1{height:5px;}
.test-2{height:10px;}
.test-3{height:15px;}

说明：这种形式的@for从<start>开始，到<end>结束，循环包括<end>。

（2）第二种形式从<start>开始循环，到<end>结束，结束时不包括<end>的值。

@for $var from <start> to <end>
例子

@for $item from 1 to 3 {
   .test-#{$item} { height:5px * $item ;}
}

//编译后
.test-1{height:5px;}
.test-2{height:10px;}

小结：
两种@for形式中，<start> 和<end>必须是整数。其中@var 可以是任何变量名，我通常习惯用@item来定义变量，实现递增或递减。

 

3.Sass多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

(1) list类型

在sass 中list类型是通过空格或逗号隔开的一串值。如：2,4,6,8 或2 4 6 8 。
也可以是多维数组，如：a b,c d 或(a,b)(c,d)表示包含数组a b,c d两个数组的数组。
可用nth($var,$index)取值如：

//sass style
//一维数据
$test: 10px 9px 8px 7px;
//二维数据
$test1: 5px 10px, 0 auto;
$test2:( 5px 10px)(0 auto);
div {
  margin: nth($test1, 2);
  padding: nth($test, 1);
}

//编译后
div {
  margin: 0 auto;
  padding: 10px;
}
也可以类似使用@for一样

@each $var in <list>
其中<list>是一组通过,分割的字符；如：

@each $icon in shake,bottle,shopping {
  .#{$icon} {
    background: url('./assets/img/#{$icon}.png');
  }
}
编译后：

.shake{
   background: url('./assets/img/shake.png');
}
.bottle{
   background: url('./assets/img/bottle.png');
}
.shopping {
   background: url('./assets/img/shopping .png');
}

(2) map类型

map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。

$map:( baidu: #fff, BABA: #ccc, tx: #000);
.baidu{
    background-color: map-get($map, baidu);
}
.BABA{
    background-color: map-get($map, BABA);
}
 
//编译后
.baidu{
  background-color: #fff;
}
.BABA{
  background-color: #ccc;
}

或用循环

@each $key, $value in (key: value, key: value);
@each $selector, $color in ( baidu: #fff, BABA: #ccc, tx: #000); {   
  #{$selector} {   
    background-color: $color ;   
  }  
}
//编译后
.baidu{
  background-color: #fff;
}
.BABA{
  background-color: #ccc;
}
.tx{
 background-color: #000;
}

 

4.扩展

Sass中，@extend指令是继承既有样式。

.icon{
    vertical-align: middle;
}
.icon.span{
    display: inline-block;
}
.shake-icon{
    background: url('./assets/img/shake.png');
    @extend .icon
}
///编译后
.icon,.shake-icon{
    vertical-align: middle; 
}
.icon.span,.shake-icon.span{
    display: inline-block;
}
.shake-icon{
    background: url('./assets/img/shake.png');   
}

 

说明：@extend的继承是继承所有的样式。