sass基础1

和less一样，sass也是一门css预处理语言，但是功能却更强大。在写sass前的准备是ruby和sass的安装。

安装及编译

• ruby安装包传送门（Windows）：https://pan.baidu.com/s/1pLyJTij
• 安装教程传送门：http://www.w3cplus.com/sassguide/install.html
• 编译：
  首先创建一个.scss文件（用来编写sass的），举例假设命名为demo.scss，在ruby下：

单一文件编译

基本用法

• 变量
  sass中变量用$符号加上变量名称：

$blue: blue;
$fontSize: 50px;
h1{
    color: $blue;
    font-size: $fontSize;
}

编译过对应的css：

h1 {
    color: blue;
    font-size: 50px; 
}

• 运算
  sass中变量可以进行运算：

$fontSize: 50px;
h1{
   font-size: $fontSize + 20px;
}

编译过对应的css：

h1 {
   font-size: 70px; 
}

• 嵌套
  sass是支持选择器嵌套的，逻辑更清晰：

div{
      h1{
          font-size: 70px; 
      }
}

编译过对应的css：

div h1 {
      font-size: 70px;
 }

在嵌套中，可以使用&来引用父元素，例如在运用伪类时：

div{
      & : hover { color: red }
}

代码重用

• 继承
  sass可以让选择器能继承另一个选择器的代码，如下，.box2想要继承.box1的代码，用@extend+选择器进行继承：

.box1{
    width: 100px;
    height: 100px;
}
.box2{
    @extend .box1;
}

编译过对应的css：

.box1, .box2 {
    width: 100px;
    height: 100px; 
}

• 混合（Mixins）
  可以类比于js中的函数，sass中的混合以@mixin开头，用@include调用，也可以进行传参：

@mixin radius($radius: 20px){
    border-radius: $radius;
}
.box1{
    width: 100px;
    height: 100px;
    @include radius();  //不传参时使用默认值20px
}
.box2{
    @extend .box1;
    @include radius(50px);  //传参时使用参数50px
}

• 颜色函数
  sass中提供了一些内置的颜色函数，darken($blue, 10%)表示比$blue深10%：

$blue: blue;
.box1{
    width: 100px;
    height: 100px;
    background-color: darken($blue, 10%);
}

除了darken，还有其他的：
*lighten($blue, 10%)
*darken($blue, 10%)
*grayscale($blue)
*complement($blue)