SASS基础

SASS是CSS的预处理器（css preprocessor），CSS的一种开发工具，支持加减乘除运算、变量、嵌套、继承（继承上一个选择器）、mixin（代码重用）、颜色函数、插入文件、条件、循环语句、自定义函数。

变量

SASS变量以$开头

$left : left;
div{
  float: $left;
}
/*编译结果*/
div{
  float: left;
}

/*变量需要嵌套在属性里须写在#{}里面*/
div{
  border-#{$left}-radius: 10px;
}

运算（SASS支持加减乘除运算）

• 加法

 div{
  width: 100 + 20px;
}
/*编译结果*/
div{
  width: 120px;
}

• 减法

 div{
  width: 100 - 20px;
}
/*编译结果*/
div{
  width: 80px;
}

• 乘法

div{
  width: 100 * 2px;
}
/*编译结果*/
div{
  width: 200px;
}

• 除法

div{
  width: (200px / 3);
}
/*编译结果*/
div{
  width: 66.66667px;
}

• 混合运算

div{
  width: (200px / 3) + 20 - 3px * 2;
}
/*编译结果*/
div{
  width: 80.66667px;
}

嵌套

• 嵌套写法可以不用写很长的选择层级，可以在选择器里嵌套着写

div{
  width: 100px;
  height: 100px;
  a{
    color: #f00;
     i{
         font-size: 16px;
       }
  }
}
/*编译结果*/
div {
  width: 100px;
  height: 100px;
}
div a {
  color: #f00;
}
div a i {
  font-size: 16px;
}

• 属性嵌套方法，比如复合属性多个值也可以使用嵌套

div{
    border:{
        width: 1px;
        top:{
            width: 1px;
            style: solid;
            color: #f00;
       }
    }
}
/*编译结果*/
div {
  border-width: 1px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #f00;
}

• 在嵌套代码里面引用父元素可以使用&，比如div:hover

div{
    &:hover a{
        text-decoration: underline;
    }
}
/*编译结果*/
div:hover a {
  text-decoration: underline;
}

注释

// 此写法不会再编译的css文件中体现
/**/ css注释方法，会在编译后体现

继承

继承另一个选择器的代码，可以使用@extend命令

.class{
    border: 1px solid #f00;
}
.class1{
    @extend.class;
    font-size: 12px;
}
/*编译结果*/
.class, .class1 {
  border: 1px solid #f00;
}

.class1 {
  font-size: 12px;
}

mixin,重用代码块

@mixin left{
    float: left;
    width: 100px;
    height: 100px;
}
.class2{
    @include left;
}
/*编译结果*/
.class2 {
  float: left;
  width: 100px;
  height: 100px;
}

• mixin还可以传参数

@mixin randomAttr( $attr , $value : 1s ){
    -webkit-#{$attr}: $value;
      -moz-#{$attr}: $value;
       -ms-#{$attr}: $value;
        -o-#{$attr}: $value;
           #{$attr}: $value;
}
div{
    @include randomAttr(animation);
}
/*编译结果*/
div {
  -webkit-animation: 1s;
  -moz-animation: 1s;
  -ms-animation: 1s;
  -o-animation: 1s;
  animation: 1s;
}