Sass 教程
您应该知道的
在继续之前，您应该对以下内容有基本的了解：
- HTML
- CSS
如果您想先学习这些科目，请在我们的 主页 上访问这些教程。
什么是 Sass？
- Sass 指的是 Syntactically Awesome Stylesheet（语法超棒的样式表）
- Sass 是一种 CSS 扩展
- Sass 是一种 CSS 预处理器
- Sass 完全兼容所有版本的 CSS
- Sass 减少了 CSS 的重复，从而节省了时间
- Sass 由 Hampton Catlin 设计，并由 Natalie Weizenbaum 于 2006 年开发
- Sass 可以免费下载和使用
为什么要使用 Sass？
样式表越来越大、越来越复杂，也越来越难维护。这是 CSS 预处理器可以提供帮助的地方。
Sass 允许您使用 CSS 中不存在的特性，比如变量、嵌套规则、mixin、导入、继承、内置函数和其他功能。
一个关于 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 代码。
提示：转译是一个术语，用于将用一种语言编写的源代码转换/翻译成另一种语言。
Sass 文件类型
Sass 文件的文件扩展名是 ".scss"。
Sass 评论
Sass 支持标准的 CSS 注释 /* comment */，此外还支持行内注释 // comment：
Sass 实例
/* 定义主要的颜色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 使用变量 */
.main-header {
background-color: $primary_1; // 您可以在这里添加行内的评论
}
相关视频
24小时阅读榜
精品课程
独孤九贱(2)_CSS视频教程
共22课时
24.3万人学习
独孤九贱(3)_JavaScript视频教程
共28课时
36.2万人学习
独孤九贱(4)_PHP视频教程
共89课时
133.1万人学习
热门下载
phpStudy 2018最新版
集成PHP7，16种组合，超全大合集
下载
vc9-vc14（32+64位）运行库合集（链接在下方）
phpStudy安装所需运行库集合下载
下载
php程序员工具箱完整版
程序员工具箱 v1.0 php集成环境
下载
SublimeText3汉化版
中文版，非常好用
下载
Notepad++ Windows版
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
phpStudy V8.1（Win64位）（已支持php8）
Win64位，支持php多版本共存
下载