Sass 概要

前端开发中最大的坑之一莫过于写css，流水账式的写法让众多码农们头痛不已。好在有了sass，写css不再死板。sass对css的增强如下：

宏定义

宏定义的优点在于一处定义，多处使用，需要修改的时候只需要修改定义的地方即可。虽然sass没有明确的说明，但其实以下几种语法与C语言中的宏定义非常类似：

变量 sass中的变量适用于替换css中参数的值。例如： scss: $basic-margin: “10px 20px”; #box01 {
margin: $basic-margin;
} #box02 {
margin: $basic-margin;
} css: #box01 {
margin: “10px 20px”;
} #box02 {
margin: “10px 20px”;
} sass允许根据变量，选择性的输出css，类似于开关，例如： scss: $rounded-corners: false; .button {
border: 1px solid black;
border-radius: if($rounded-corners, 5px, null);
} css: .button {
border: 1px solid black;
} sass 也允许在子模块中给变量设置默认值，引用的时候可以再重新定义变量的值 _module.scss: $userColor: red !default; .bass {
padding: 0 20px;
color: $userColor;
} test.scss: $userColor: black;
@import “module”; test.css: .bass {
padding: 0 20px;
color: black;
} test.scss: @import “module”; test.css
.bass {
padding: 0 20px;
color: red;
} 使用!global可以在局部环境中设置全局变量的值，例如： test.scss: $color: red; .text {
$color: black !global;
} .box {
color: $color;
} test.css: .box {
color: black;
}
mixin sass中的mixin类似于支持参数的代码片段，可以很方便的将一段常用的代码片段插入到css规则中去，例如： scss: @mixin normal-font($fontfamily) {
font-size: 18px;
font-family: $fontfamily;
} .box {
width: 200px;
height: 200px;
@include normal-font(“IBM Plex Sans”);
} css: .box {
width: 200px;
height: 200px;
font-size: 18px;
font-family: “IBM Plex Sans”;
}
扩展与继承 sass中的扩展相当于不带参数的代码片段，适用于同一组件的不同状态，语法如下： scss: %message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
} .message {
@extend %message-shared;
} .success {
@extend %message-shared;
border-color: green;
} .error {
@extend %message-shared;
border-color: red;
} .warning {
@extend %message-shared;
border-color: yellow;
} css: .warning, .error, .success, .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
} .success {
border-color: green;
} .error {
border-color: red;
} .warning {
border-color: yellow;
}

模块化

sass也借鉴了编程语言中的模块化思想，允许文件引入。以下划线开头的文件类似于子模块，不会被被sass编译为css，只能被其他scss文件引用。例如：

_module.scss:

.bass {
padding: 0 20px;
}

test.scss:

@import “module”;

$basic-margin: “10px 20px”;

#box01 {
margin: $basic-margin;
}

#box02 {
margin: $basic-margin;
}

test.css:

.bass {
padding: 0 20px;
}

#box01 {
margin: “10px 20px”;
}

#box02 {
margin: “10px 20px”;
}

语法简化

scss也对css的语法做了一些简化，比如说：

嵌套写scss子元素的规则不再另起一条规则，只需要嵌套在父元素中的规则中即可，例如： scss: $basic-margin: “10px 20px”; .bss {
margin: $basic-margin;
#dash {
```
 margin-top: 20px;
 padding-top: 20px;
```
}
.dash {
```
 margin-top: 20px;
 margin-bottom: 20px;
```
}
} css: .bss {
margin: “10px 20px”;
}
.bss #dash {
margin-top: 20px;
padding-top: 20px;
}
.bss .dash {
margin-top: 20px;
margin-bottom: 20px;
} 另一种方式的嵌套： scss： .box {
margin: {
```
 top: 20px;
 bottom: 10px;
 right: 10px;
 left: 20px;
```
}
} css: .box {
margin-top: 20px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 20px;
}

可编程化

sass也做了一些工作让css更像一门编程语言而不是一遍作文。其中包括：

支持运算 css是不支持运算的，而在scss中可以做一些简单的运算，例如： scss: .box {
width: 100px / 200px * 100%;
} css: .box {
width: 50%;
}
数值类型 scss中的值分为以下几种类型：
- 数字，例如： 20, 20px
- 字符串，例如：”IBM Plex Sans”, bold
- 颜色值，例如：#ffffff, blue
- 布尔值, true, false
- 列表，例如：0 20px 30px 40px
- 字典，例如：(“background”: red, “foreground”: pink)
操作符 scss中的操作符包括：
- == , != : 判断两个值是否相等/不相等
- + - * / %
- < <= > >=
- and or not
- + - / 可用于字符串拼接
- () 用于优先级设定
- &父元素选择器
- #{} 可以将sass表达式插入到css的文本中
代码注释
- // 单行注释，不会编译到css中
- /**/多行注释，一般会被编译进css
- 压缩模式下，多行注释不会被编译进css，除非以/*!开头
- ///为文档注释，不会被编译到css中，会被sassdoc工具使用，生成sass的文档
函数 scss中的函数主要用于数值计算，例如： scss: @function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
```
 $result: $result * $base;
```
}
@return $result;
} .sidebar {
float: left;
margin-left: pow(4, 3) * 1px;
} css: .sidebar {
float: left;
margin-left: 64px;
} Sass中的内建函数详见 https://sass-lang.com/documentation/functions

流程控制

分支 @if , @else, @else if 例如： scss: @mixin triangle($color, $size, $direction) {

display: block;
height: 0;
width: 0;
border: $size/2 solid transparent;

@if $direction == up {
  border-bottom-color: $color;
} @else if $direction == down {
  border-top-color: $color;
} @else if $direction == left {
  border-right-color: $color;
} @else if $direction == right {
  border-left-color: $color;
} @else {
  @error "wrong direction: #{$direction}";
}

} .next {

@include triangle(green, 20px, right);

} css: .next {

display: block;
height: 0;
width: 0;
border: 10px solid transparent;
border-left-color: green;

}

循环 @each @for @while 例如： scss: $sizes: 40px, 50px, 80px; @each $size in $sizes {

.icon-#{$size} {
  font-size: $size;
  height: $size;
  width: $size;
}

} css: .icon-40px {

font-size: 40px;
height: 40px;
width: 40px;

} .icon-50px {

font-size: 50px;
height: 50px;
width: 50px;

} .icon-80px {

font-size: 80px;
height: 80px;
width: 80px;

} scss:
$base-color: #036; @for $i from 1 through 3 {

ul:nth-child(3n + #{$i}) {
  background-color: lighten($base-color, $i * 5%);
}

} css: ul:nth-child(3n + 1) {

background-color: #004080;

} ul:nth-child(3n + 2) {

background-color: #004d99;

} ul:nth-child(3n + 3) {

background-color: #0059b3;

} scss:
@function scale-below($value, $base, $ratio: 1.618) {

@while $value > $base {
  $value: $value / $ratio;
}
@return $value;

} $normal-font-size: 16px;
sup {

font-size: scale-below(20px, 16px);

} css:
sup {

font-size: 12.36094px;

}

数值类型 sass中的数值类型包括以下几种：数值，字符串，颜色，List, Map，布尔值，null及函数
- 数值包含数字和单位，sass的强大之处在于支持带单位的运算，例如： @debug 1in + 6px; // 102px or 1.0625in
- list和map的用法举例： $prefixes-by-browser: (“firefox”: moz, “safari”: webkit, “ie”: ms); @function prefixes-for-browsers($browsers) {
```
$prefixes: ();
@each $browser in $browsers {
  $prefixes: append($prefixes, map-get($prefixes-by-browser, $browser));
}
@return $prefixes;
```
  } @debug prefixes-for-browsers(“firefox” “ie”); // moz ms