当前位置 : 主页 > 手机开发 > 其它 >

SASS- 局部文件(Partial)

来源:互联网 收集:自由互联 发布时间:2021-06-19
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; }
网友评论