一、注释

1. //：只在scss源文件中有，css文件中没有
2. / /：在压缩的css文件中没有，其他都有
3. /！/：任何css文件中都有，一般用于说明版权等信息

二、变量

1. 定义变量：以$开头，$color1:red; 有块作用域的概念
2. 如果希望在某子选择器中定义的变量成为全局变量，可以前面加！global关键字
3. 在字符串中使用变量 #{} radius1:radius; border-#{radius1}:30px;
4. 变量也可以进行计算

三、选择器嵌套

1. 选择器和属性都可以进行嵌套，属性嵌套必须在后面加：，标签内可以嵌套属性，属性内嵌套属性 div{p{border:{color:red;}}
2. 嵌套的子层级中可以通过&来引用父元素
   div{&:hover{color:red}} div悬停颜色变红

四、复用

1. 继承，一个选择器可以继承另一个选择器的样式
   .div1{font-size:19px;}

.div2{@extend.div1;color:red;}

.div1{font-weight:bold} ;
两个.div1的样式都会影响.div2

2. 复用代码块 @mixin和@include @mixin left{float:left;margin-left:30px;} 使用@mixin定义一个left的代码块

div{@include left} 使用@include复用left代码块

3. 参数
   @mixin common($val1,$val2,val3:30px;){margin-left:val1;margin-right:$val2;padding:$val3}

div{font-size:16px;@include common(12px,13px)}

五、引入外部文件

@import ...

六、编程式方法

1. @if @else
2. @for ... from ... to...
3. @while
4. @each
5. @function @return

七、内置颜色函数

1. lighten();
2. darken();
3. grayscale();
4. complement()