在开始讨论主要的 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 循环,判断语句
领取专属 10元无门槛券
私享最新 技术干货