Sass @import 与 Partials
最后更新于:2022-03-27 02:40:01
Sass @import
Sass 可以帮助我们减少 CSS 重复的代码,节省开发时间。
我们可以安装不同的属性来创建一些代码文件,如:变量定义的文件、颜色相关的文件、字体相关的文件等。
Sass 导入文件
类似 CSS,Sass 支持 @import 指令。
@import 指令可以让我们导入其他文件等内容。
CSS @import 指令在每次调用时,都会创建一个额外的 HTTP 请求。但,Sass @import 指令将文件包含在 CSS 中,不需要额外的 HTTP 请求。
Sass @import 指令语法如下:
@import filename;
注意:包含文件时不需要指定文件后缀,Sass 会自动添加后缀 .scss。
此外,你也可以导入 CSS 文件。
导入后我们就可以在主文件中使用导入文件等变量。
以下实例,导入 variables.scss、colors.scss 和 reset.scss 文件。
Sass 代码:
@import "colors";
@import "reset";
接下来我们创建一个 reset.scss 文件:
reset.scss 文件代码:
body,
ul,
ol {
margin: 0;
padding: 0;
}
然后我们在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件:
standard.scss 文件代码:
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
将以上代码转换为 CSS 代码,如下所示:
Css 代码:
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Sass Partials
如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件,你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。
但是,在导入语句中我们不需要添加下划线。
Sass Partials 语法格式:
_filename;
以下实例创建一个 _colors.scss 的文件,但是不会编译成 _colors.css 文件:
_colors.scss 文件代码:
$myBlue: #4169E1;
$myGreen: #8FBC8F;
如果要导入该文件,则不需要使用下划线:
实例
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
注意:请不要将带下划线与不带下划线的同名文件放置在同一个目录下,比如,_colors.scss 和 colors.scss 不能同时存在于同一个目录下,否则带下划线的文件将会被忽略。