简介

Sass 是一个 CSS 预处理器。

Sass 文件后缀为 .scss

为什么使用 Sass

sass扩展了css，使css更容易编写维护。

变量

Sass 变量使用 $ 符号定义

变量的作用于只能在当前{}中有效

可以使用 !global 设置变量是全局的

嵌套规则

类似于 HTML 的嵌套规则

导入文件

用 @import 指令导入其他scss文件

不编译到css文件

如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。 但是，在导入语句中我们不需要添加下划线。

混入

@mixin 指令定义可以混入其他{}的样式。

@include 指令可以将混入引入到{}。

定义混入

使用混入

传递参数的混入

继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

函数

字符串函数

str-length(string)：返回字符串的长度。

str-slice(string, start, end)：字符串截取

数字相关函数

abs(number)：返回一个数的绝对值

ceil(number)：向上取整