scss 学习笔记

1、安装

使用 node 通过 npm 安装 sass

其他安装方式请自行搜索。

2、预处理

安装 sass 之后可以在终端运行 sass 命令将 scss 文件编译成 css文件。

命令将监听 app/scss 目录下的 scss 文件，被修改时会自动被编译成 css 文件，并输出到 public/style 目录下。

3、变量

sass 使用 $ 符号未开始定义变量名

4、嵌套

sass 允许使用符合 html 视觉层次结构的方式嵌套 css 选择器

5、import

使用 import 可以将多个 scss 文件导入到一个文件中，通常作为模块被导入的 scss 文件以前导下划线_ 开始命名文件名称。

导入 _reset.scss 文件时不需要写扩展名 .scss，前导下划线也可以省略。

6、混入

mixin 允许创建在整个站点重用的 css 声明组。可以向函数参数一样出入值，使 mixin 更灵活。主要在编写不同的浏览器前缀时使用。

创建时使用 @mixin 指令为其命名，使用时为 @include 后跟 mixin 名称。

7、扩展/继承

使用 @extend 允许从一个选择器共享一组 css 属性到另一个选择器。占位符类只有在扩展时才会打印。