scss用法总结

已经用了scss很久了，有时间来归纳一下。

1. 基本用法

1.1 变量

scss最普遍的用法就是变量，变量以$开头，赋值方法与css属性的写法一样：

$width = 50px
.box {
  width:$width
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换成全局变量可以添加!global声明：

.box {
  $width:50px !global;
  width:$width
}
.sidebar {
  width:$width
}

编译为

.box {
  width:50px
}
.sidebar {
  width:50px
}

1.2 计算功能

所有数据均支持相等运算 == 或 != ，此外，每种数据类型也有其各自支持的运算方式

1.2.1 数字运算

scss支持数字的加减乘除、取整等运算，如果在必要会在不同单位间转换值。

.sidebar {
  width:10*(11px+2px)
}

编译后为：

.sidebar {
  width:10*(11px+2px)
}

1.2.2 颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色。以及蓝色的值：

.sidebar {
  color:#010203 + #040506
}

计算01+04 = 05 02+05 = 07 03+06 = 09，然后编译为

.sidebar {
  color:#050709
}

1.2.3 字符串运算

+可以用于连接字符串

p {
  content: "今天吃了#{10+2}个苹果"
}

编译为

p {
  content: "今天吃了12个苹果"
}

1.2.4 布尔运算

支持布尔型的and or 以及 not 运算

1.3 嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

div {
  width: 100px;
  .text {
   color: red
  }
  可以用 & 代表嵌套规则外层的父选择器
  &:hover {
    backgroud: blue
  }
}

1.4 注释 /* / 与 // (Comments: / */ and //)

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会，例如：

/*
 * 这行注释会完整输出
 */
 .blue{
  	backgroud:blue
 }
 // 这行注释会被注释
 .red {
  	color:red
 }

2.代码的重用

2.1 继承@extend

有时候我们会为了给同一种样式，加上特殊的样式。

<div class="car my-car"></div>

这样做会带来了很多不变：比如加重维护负担，导致 bug，或者给 HTML 添加无语意的样式。使用 @extend 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器

.car {
  color:blue;
  width:20px;
  height:20px
}
.my-car{
  @extend .car;
  color:red
}

2.2 混合指令 @mixin

用于定义可重复的样式，避免了无语义的class

@mixin size($width:null,$height:null) {
  width:$width;
  height:$height
}
.box{
  @includes size(20px,10px);
  color:red
}

2.3 插入文件 @import

@import
Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

@import 'foo.scss' 

3.1 循环语句

@while指令重复输出格式值直至表达式返回结果为flase。

$i = 6
@while $i>0 {
  item-#{$i}:{width:($i+11)px}
  $i = $i - 2
}

编译后为

item-6 {
  width: 17 px;
}
item-4 {
  width: 15 px;
}
item-2 {
  width: 13 px;
}

3.2 自定义函数

scss支持自定义函数，与mixin大致相同。一个函数可以包含多个语句，需要调用@return返回结果。

$width:10px;
$height:20px;

@function getWidth($n){
  @return ($width+$height)/$n
}

#app{
  width: getWidth(2);
}

自定义函数也可以使用关键词参数，上面的例子也可以这样写：

#app{
  width: getWidth($n:2);
}

编译后为

#app{
  width: 15px;
}