Sass 简介
您应该已经了解的内容
在继续之前,您应该对以下内容有一个基本的了解:
- HTML
- CSS
如果您想先学习这些主题,请在我们首页上查找教程。
什么是 Sass?
- Sass 代表 Syntactically Awesome Stylesheet(语法优美的样式表)
- Sass 是 CSS 的扩展
- Sass 是一个 CSS 预处理器
- Sass 完全兼容所有版本的 CSS
- Sass 减少了 CSS 的重复,从而节省了时间
- Sass 于 2006 年由 Hampton Catlin 设计,Natalie Weizenbaum 开发
- Sass 可免费下载和使用
为什么要使用 Sass?
样式表变得越来越大、越来越复杂,也越来越难以维护。这时,CSS 预处理器就可以派上用场了。
Sass 允许你使用 CSS 中不存在的功能,例如变量、嵌套规则、混合(mixins)、导入(imports)、继承(inheritance)、内置函数等。
Sass 用途的一个简单示例
假设我们有一个网站,有三种主色调
#a2b9bc
#b2ad7f
#878f99
那么,你需要输入多少次这些 HEX 值?很多次。如果出现相同颜色的变体呢?
与其多次输入上述值,不如使用 Sass 并这样写
Sass 示例
/* 为主色定义变量 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 使用变量 */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
因此,当使用 Sass 时,如果主色调发生变化,你只需要在一个地方更改即可。
Sass 如何工作?
浏览器无法理解 Sass 代码。因此,你需要一个 Sass 预处理器来将 Sass 代码转换为标准的 CSS。
这个过程称为转译(transpiling)。所以,你需要提供一些 Sass 代码给转译器(某种程序),然后得到一些 CSS 代码。
提示: 转译(Transpiling)是指将一种语言的源代码转换/翻译成另一种语言。
Sass 文件类型
Sass 文件具有 ".scss" 文件扩展名。
Sass 注释
Sass 支持标准的 CSS 注释 /* 注释 */
,此外它还支持单行注释 // 注释
Sass 示例
/* 定义主色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 使用变量 */
.main-header {
background-color: $primary_1; // 这里可以放一个单行注释
}