sass笔记

一. 基础功能

1.变量； 
2.嵌套； 
3.mixin； 
4.继承； 
5. import； 
6. 计算； 
7. 颜色函数； 
8. Interpolation； 
9. if 判断； 
10. for循环； 
11. 列表循环； 
12. while循环； 
13.function自定义函数；

二. 常用语法说明

• 变量

  声明变量： $yanse: rgb(223, 148, 148);

  使用： h1{ color: $yanse； }

• 嵌套

  HTML：

   <div>
        <ul>
           <li></li>
        </ul>     
   </div>

使用：
   

        div{ 
            height: 100px; 
                ul{ 
                    height: 80px;
                    li{ 
                        height: 50px; 
                    } 
                } 
       }

相当于

  div { 
      height: 100px; 
      }
  div ul { 
      height: 80px; 
      }
  div ul li { 
      height: 50px; 
      }

mixin 混合 （相当于预先写好了一组样式，其它地方直接引用）

基本语法：

@mixin 名字（参数1，参数2，...）
{
........样式.......

}

如（无参数的，里面也可以嵌套，下面定义了一个名字为hunhe的mixin，然后在div这个选择器里通过（@include 名字）调用 ）：

@mixin hunhe {
     color: red;
     a {
         font-size: 12px;
     }
}

div{
    @include hunhe;  
}

相当于：

div {
  color: red;
}
div a {
  font-size: 12px;
}
复制代码

有参数的（更灵活，参数相当于你要的数值，参数名前面要写$，调用时值的位置要对）：

如：

@mixin hunhe($one,$two) {
     color: $one;
     a {
         color: $one;
         font-size: $two;
     }
}

div{
    @include hunhe(red,15px);  
}

*div也可以这样写,指定参数名，参数位置就可以随意变换：

div{
    @include hunhe($two:15px,$one:red);  
}
复制代码

上面相当于：

div {
  color: red;
}
div a {
  color: red;
  font-size: 15px;
}

继承/扩展（一个选择器可以继承另一个选择器的全部样式）

如: .two类里继承了.one类的全部样式 （ @extend 名字）； 还不止.one的，跟.one相关的都继承了 ，具体如下：

.one{
    color: #000;
}
.one a{
    font-size: 10px;
}
.two{
    @extend .one;
    background-color: #fff;
}
复制代码

相当于：

.one, .two {
  color: #000;
}

.one a, .two a {
  font-size: 10px;
}

.two {
  background-color: #fff;
}

@import 引入一个.scss后缀的文件作为自己的一部分，被引入的那个文件并不会转换成.css格式的，所以此文件命名要注意以下划线开头，如：_base.scss ，引入它的时候不用写下划线。

语法：@import: ".....路径"; 如： 建立一个文件叫 _base.scss，里面写上一些选择器和样式，然后在一个正常的如one.scss文件里引入它,假如目录是同等级的：

@import: "base.scss";
复制代码

这样.one.scss就有了_base.scss里的全部内容。

计算功能 （SASS允许在代码中使用算式）如：

  $chang: 20px;
body{   
    margin: (10px*2);
    left: 20px + $chang;
} 
复制代码

相当于：

body {
  margin: 20px;
  left: 40px;
}