## 1.继承 **Sass** 语法中支持 **css** 样式 的**继承** 关键语法：**@extend**  ```scss .test1{ width: 200px + 100px; height: 50px *2; background: red + green; } .test2{ //使用 @extend 继承 .test1中所有的样式 @extend .test1; } .test3{ //继承 .test1中所有的样式 @extend .test1; } ``` 编译后的结果： ```css .test1, .test2, .test3 { width: 300px; height: 100px; background: #ff8000; } ``` ## 2.占位符 **Sass** 中的占位符 **%placeholder** 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 **%placeholder** 声明的代码，**如果不被 @extend 调用的话，不会产生任何代码**。  ```scss //使用%定义占位符 %BorderBottom{ border-bottom: 3px dashed deeppink; } //使用%定义占位符 %BorderTop{ border-top: 3px dashed purple; } //使用@mixin定义混合 @mixin BorderLeft{ border-left:3px dashed olive ; } .test1{ width: 200px + 100px; height: 50px *2; background: red + green; //调用占位符 @extend %BorderTop; //调用混合 @include BorderLeft; } .test2{ //继承 @extend .test1; } ``` 编译后输出的结果： ```scss .test1, .test2 { border-top: 3px dashed purple; } .test1, .test2 { width: 300px; height: 100px; background: #ff8000; border-left: 3px dashed olive; } ``` **总结：混合、继承和占位符的区别**  ## 3.插值 Interpolation > 插值的符号 #{ } , 注意不能在 @include 后面使用插值语法  ```scss @mixin set-margin($Direction,$vaule){ //这里使用插值语法 #{ } margin-#{$Direction}:$vaule; } .test1{ width: 20px * 5; height: (100px/2); background: red; } .test2{ @extend .test1; //调用混合 @include set-margin(top,30px); } ``` 编译输出的结果： ```scss .test1, .test2 { width: 100px; height: 50px; background: red; } .test2 { margin-top: 30px; } ``` ## 4.运算 在程序中的运算是常见的一件事情，但在 **CSS** 中能做运算的，到目前为止仅有 **calc()** 函数可行。但在 **Sass** 中，运算只是其基本语法之一。 > 注意：关注除法运算的语法  ```scss $bgColor1:red; $bgColor2:blue; .test1{ /**加减法*/ font-size: 10px + 10px; //可以 //font-size: 10px + 5; //可以 //font-size: 10 - 5px; //可以 /**乘法*/ width: 20px * 5; //可以 //width: 20 * 5px; //可以 //width: 20px * 5px; //不可以 /**除法*/ height: (100px/2); //可以 //height: 100px/2;//不可以 //height: 100px/2px;//不可以 //height: (100/2)px;//不可以 /**颜色计算*/ //background: red + green;//可以 //background: $bgColor1 + $bgColor2;//可以 background: #010101 + #020202; //可以 ( 规律是对应的两位相加得 #030303 ) } ```