关于css:Sass中如何导入文件

46次阅读

共计 1636 个字符,预计需要花费 5 分钟才能阅读完成。

在 CSS 中咱们能够通过 @import 指令将一个 css 文件导入到另一个 css 文件中。然而它有一个须要留神的中央,就是只有执行到 @import 指令时,浏览器才会去下载其余 css 文件,这导致页面加载起来特地慢,所以并不太罕用。

而 Sass 语言中同样反对 @import 指令的应用,并且与 CSS 中有一些区别,上面咱们来看一下 Sass 中是如何应用 @import 指令导入文件的。

Sass 导入文件

Sass 中也有一个 @import 规定,然而与 CSS 有一些不同,CSS 中 @import 指令在每次调用时,都会都会创立一个额定的 HTTP 申请。Sass 中的 @import 规定在生成 CSS 文件时就把相干文件导入进来,不须要额定的 HTTP 申请。

在导入 Sass 文件时,能够不必导入文件的全名,省略 .sass 或者 .scss 后缀名。这样在不批改样式表的前提下,就能够批改被导入的 Sass 款式文件语法,在 sassscss 语法之间随便切换。

示例:

例如已知现有两个 Sass 文件:

// first.scss 文件
.xkd{
    font-size: 14px;
    p{color: pink;}
}
// second.scss 文件
.f14{font-size: 14px;}
.f16{font-size: 16px;}

如果咱们须要将 second.scss 文件导入到 first.scss 文件中,能够像上面这样:

.xkd{
    font-size: 14px;
    p{color: pink;}
}
@import "./second";

而后执行编译命令:

sass first.scss:first.css --style expanded

上述代码编译后的 CSS 代码,如下所示(first.css):

.xkd {font-size: 14px;}
.xkd p {color: pink;}

.f14 {font-size: 14px;}

.f16 {font-size: 16px;}

能够看到 second.scss 文件中的代码也胜利编译到了 first.css 文件中。

须要留神的是,在 CSS 中 @import 指令必须位于文件的顶部,而在 Sass 中 @import 指令则能够位于文件中的任意地位。

因为 Sass 能够兼容原生 CSS 语法,所以咱们也能够在 Sass 文件中导入 CSS 文件。

应用 SASS 局部文件

在一个理论我的项目中会可能会创立很多 Sass 文件,然而个别不会每个 Sass 文件都有一个对应的 CSS 文件,而是将少数几个 Sass 文件生成 CSS 文件,其余的 Sass 文件则通过 @import 导入到这些 Sass 文件中。个别不须要生成独立 CSS 文件的 Sass 文件称为部分文件,Sass 中有非凡的约定来命名这些文件。

Sass 部分文件的文件名以下划线结尾,这样 Sass 就不会在编译时独自编译这个文件输入 CSS,而只把这个文件用作导入。当导入部分文件时,能够省略文件名结尾的下划线。

示例:

例如当初有一个部分文件 _myfile.scss,这个文件在编译时不会被生成一个对应的 CSS 文件,而是导入到其余的 Sass 文件中。导入格局如下所示:

@import "_myfile";

嵌套导入

Sass 文件的导入和 CSS 还有一点不同,就是 Sass 反对 import 命令写嵌套语法中,导入的 Sass 部分文件就会被直接插入到 CSS 规定内导入它的中央。

示例:

例如当初有一个部分 Sass 文件 _myfile.scss

.xkd{font-size: 14px;}

而后将这个部分文件导入到另一个 Sass 文件 style.scss 中:

.div{
    color: #ccc;
    .div-top{
        border: 1px solid #000;
        @import "./myfile";
    }
}

编译成 CSS 代码:

.div {color: #ccc;}
.div .div-top {border: 1px solid #000;}
.div .div-top .xkd {font-size: 14px;}

能够看到编译后的 CSS 文件中,部分文件 _myfile.scss 中的款式,被嵌套在了 .div-top 选择器中。

正文完
 0