详解Sass@import与Partials

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

专注于为中小企业提供网站制作、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业兴宁免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。

文章标题：详解Sass@import与Partials
当前地址：http://www.shufengxianlan.com/qtweb/news38/394238.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联