SCSS/SASS 指南

在开始讨论主要的 Sass 之前需要了的点。

小记：所有的 Sass/SCSS 代码编译成标准的 CSS 代码，所以浏览器可以理解并渲染出。浏览器目前不支持直接使用 Sass/SCSS 或其它 CSS 预加载，也没有像标准的 CSS 文档准则确保有可替代的功能。

开始

你可能刚开始不了解Sassy CSS强大之处，直到第一次使用for-loop来迭代属性值。然而我们从基础的 SCSS 规则开始，一点点地理解。

什么是 Sass/SCSS 能做但原生 CSS 不能做的？

嵌套规则

变量

更方便地操作

自定义函数

三角函数

循环、判断语句

Mixins

Sass 预处理器

SASS — (.sass) Syntactically Awesome Style Sheets.

SCSS — (.scss) Sassy Cascading Style Sheets.

1 使用 Sass 预处理器转换 .scss/.sass 文件

2 基于 $variable 定义

3 Sass $variable 能被赋给任何 CSS 属性

4 用 CSS 嵌套

5 用 SCSS 嵌套

6 使用 & 字符，像 &:hover。

翻译成

7 通过 @mixin 定义函数赋值给 CSS 属性

8 通过 @mixin 处理浏览器前缀

9 数学计算

10 循环，判断语句