4.Sass @import与Partials

Sass 可以让我们减少可以帮助我们减少 CSS 重复的代码，节省开发时间。
我们可以安装不同的属性来创建一些代码文件，如：变量定义的文件、颜色相关的文件、字体相关的文件等。

/* 指令 */
@import filename;

另：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。

/*导入 variables.scss、colors.scss 和 reset.scss 文件*/
@import "variables";
@import "colors";
@import "reset";

/* reset.scss */
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* standard.scss */
@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials

如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。
但是，在导入语句中我们不需要添加下划线。

创建一个 _colors.scss 的文件，编译时不会编译成 _colors.css 文件

/* _colors.scss */
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

导入_colors.scss，不需要使用下划线：

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}

注意：请不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。

上一篇：3.Sass 嵌套规则与属性 >>

下一篇：5.Sass @mixin 与 @include >>

最后编辑于：2020.03.18 17:33:25

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

4.Sass @import与Partials