Sass

#############

Sass 是一个 CSS 预处理器。

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

阅读本教程前，您需要了解的知识：

• HTML
• CSS

什么是 Sass?

• Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 于 2006 开发的层叠样式表语言。
• Sass 是一个 CSS 预处理器。
• Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
• Sass 完全兼容所有版本的 CSS。
• Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
• Sass 生成良好格式化的 CSS 代码，易于组织和维护。
• Sass 文件后缀为 .scss。

---

为什么使用 Sass?

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

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

Sass 是如何工作的？

浏览器并不支持 Sass 代码。因此，你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。

---

Sass 文件后缀

Sass 文件后缀为 ".scss" 。

---

Sass 注释

Sass 支持标准 CSS 注释 /* comment */, 此外，它还支持内联注释 // comment:

Sass 的系统要求

• 操作系统 - Sass 与平台无关
• 浏览器支持 - Sass 适用于 Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera
• 编程语言 - Sass 基于 Ruby

---

Sass 官方网站

有关 Sass 的更多信息，请访问Sass官方网站: https://sass-lang.com/

---

安装 Sass

对于 Mac, Windows, and Linux 有几种方法可以在系统中安装 Sass。

您可以在这里阅读更多关于它们的信息: sass-lang.com/install

Sass 变量

变量用于存储一些信息，它可以重复使用。

Sass 变量可以存储以下信息：

• strings
• numbers
• colors
• booleans
• lists
• nulls

Sass 变量使用 $ 符号,后跟名称，以声明变量:

Sass 变量语法:

$variablename: value;

 

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

将以上代码转换为 CSS 代码，如下所示：

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

 

 

 

 

 

 

 

################