SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS – @extend(继承)指令 SASS – 操作符 SASS – 函数 SASS – 输出格式 S
- SASS – 简介
- SASS – 环境搭建
- SASS – 使用Sass程序
- SASS – 语法
- SASS – 变量
- SASS- 局部文件(Partial)
- SASS – 混合(Mixin)
- SASS – @extend(继承)指令
- SASS – 操作符
- SASS – 函数
- SASS – 输出格式
Sass源文件中可以通过@import
指令导入其他Sass源文件,被导入的文件就是局部文件,局部文件让Sass模块化编写更加容易。
如果一个目录正在被Sass程序监测,目录下的所有scss/sass源文件都会被编译,但通常不希望局部文件被编译,因为局部文件是用来被导入到其他文件的。如果不想局部文件被编译,文件名可以以下划线 (_)开头。
举例说明
假设我们有一个局部文件: _colors.scss,该文件会被导入到styles.scss文件,然后styles.scss会被编译为styles.css。
_colors.scss文件内容:
$primary-color: orange; $secondary-color: gold;
使用@import
导入局部文件,styles.scss内容如下:
@import "colors"; body { color: $primary-color; background: $secondary-color; }
可以看到在使用@import
导入局部文件_color.scss时,省略了下划线和扩展名,这是允许的。
styles.scss编译后的CSS文件内容如下:
body { color: orange; background: gold; }