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;}