SASS学习笔记

CSS的预处理器主要有两种（LESS、SASS）,今天来说一下SASS，顺便记录下来，方便日后查阅

SASS提供了许多便利的功能去帮助我们编写维护性高的CSS：

1.允许定义变量

$bgcolor : yellow;
$direction : left;
div {
    background: $bgcolor;
    margin-#{$direction}: 10px;
}

ps:变量镶嵌在字符串之中，需要写在#{}之中

2.允许选择器、属性嵌套

div {
    background: $bgcolor;
    p {
        font-size: 12px;
        border: {
            color: red;
            radius: 2px;
        }
    }
}

3.计算功能

div {
    //运算符前后请留空格，不然会报错
    width: 10px + 10px;
    height: 10px / 2;
}

4.继承

.class1 {
    width: 20px;
    height: 10px;
}

.class2 {
    @extend .class1;
}

5.Mixin代码块

//$val为参数，我给它设定了默认值30px
@mixin size($val:30px){
    width: 20px;
    height: $val;
}

div {   
    //使用默认参数
    @include size;
}

div {
    //可以自定义参数
    @include size(10px);
}

6.自定义函数

@function diy($val){
    @return $val + 1;
}

div {
    width: diy(10px);
}

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

//list
$color: red,blue,yellow;
//list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值
div {
    color: nth($color,1);
}

//map

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

$color: (one: red, two: blue, three: yellow);

div {
    color: map-get($color, one);
}

8.颜色函数
举例：lighten($color,$amount) 减淡
darken($color,$amount) 加深

$bgcolor: yellow;
div {
    color:　lighten(red, 10%);
    background: darken($bgcolor, 20%);
}

9.条件判断及循环

@if

$index = 1;
.class1 {
    @if $index == 1 {
        width: 20px;
    } @else {
        width: 10px;
    }
}

三目判断
语法为：if($condition,$if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

div {
    width: if(true, 1px, 2px);
}

for循环
for循环有两种形式，分别为：@for $var from <start> through <end>和@for$var from to 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

@for $val from 1 through 3 {
    .class#{$val} {
        width: $val * 10px;
    }
}

@each循环
语法为：@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据

$arr a,b,c;

@each $val in $arr {
    .div-#{$val} {
        background: url('../images/#{$val}.png');
    }
}

ps:
SASS共有两种注释风格。标准的CSS注释 /* comment / ，会保留到编译后的文件。单行注释 // comment，只保留在SASS源文件中，编译后被省略。在/后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。