良许Linux教程网 干货合集 详解Sass@import与Partials

详解Sass@import与Partials

Sass(Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这里是官方文档,本篇文章重点为大家讲解一下Sass @import与Partials。

image-20220315221750748

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 "variables";
@import "colors";
@import "reset";

接下来我们创建一个 reset.scss 文件:

reset.scss 文件代码:

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

然后我们在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件:

standard.scss 文件代码:

@import "reset";

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

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

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 文件。

但是,在导入语句中我们不需要添加下划线。

Sass Partials 语法格式:

_filename;

以下实例创建一个 _colors.scss 的文件,但是不会编译成 _colors.css 文件:

_colors.scss 文件代码:

$myPink#EE82EE;
$myBlue#4169E1;
$myGreen#8FBC8F;

如果要导入该文件,则不需要使用下划线:

实例

@import "colors";

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

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

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

1ad5ad6eddc451da964a8888a6fd5266d0163210
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部