sass 教程——迹忆客-ag捕鱼王app官网

sass 是一个 css 预处理器。

sass (英文全称：syntactically awesome stylesheets) 是一个最初由 hampton catlin 设计并由 natalie weizenbaum 开发的层叠样式表语言。

sass 是 css 扩展语言，可以帮助我们减少 css 重复的代码，节省开发时间。

sass 完全兼容所有版本的 css。

sass 扩展了 css3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

sass 生成良好格式化的 css 代码，易于组织和维护。

sass 文件后缀为 .scss。

sass 实例

/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* 使用变量 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

阅读本教程前，您需要了解的知识： 阅读本教程，您需要有以下基础：

• html 教程
• css 教程

为什么使用 sass? css 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。

sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

我们可以举个例子，我们会在 css 中重复使用很多次十六进制的颜色代码，当有了变量之后，如果要改变颜色代码，只要修改变量的值就好了：

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 代码转换为 css 代码。