Sass 导入SASS文件 下载APP
Sass 导入SASS文件

Sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。

使用sass的@import规则并不需要指明被导入文件的全名。可以省略.sass或.scss文件后缀。这样,在不修改样式表的前提下,可以随意修改自己或别人写的被导入的sass样式文件语法,在sass和scss语法之间随意切换。

使用SASS部分文件

当通过@import把Sass样式分散到多个文件是,通常只想生成几个少数css文件。那些专门为@import命令而编写的sass文件,不需要生成对用的独立css文件,这样的sass文件称为局部文件。sass有特殊的约定来命名这些文件。

这个约定也就是:sass局部文件的文件名以下划线开头。这样sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。当@import一个局部文件是,还可以不写文件的全名,即省略文件名开头的下划线。

如:想导入themes/_night-sky.scss这个局部文件里的变量,只需在样式表中写@import "themes/night-sky";。

默认变量值

一般情况下,反复声明一个变量,只有最后一处声明有效,并且会覆盖前边的值。

$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

上边的例子中,超链接的color会被设置为red。

但这可能并不是想要的结果,假如写了一个可以被他人通过@import导入的sass文件,可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!import标签的对立面,不同的是!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

上述例子中,如果用户在导入sass局部文件之前声明了一个$fancybox-width变量,那么局部文件中对$fancybox-width赋值400px操作无效。如果没有声明,则$fancybox-width将默认为400px。

嵌套导入

跟原生的css不同,sass允许@import命令写在css规则内。这种导入方式下,生成对应的css文件时,局部文件会被直接插入到css规则内导入它的地方。

实例:

一个名为_blue-theme.scss的局部文件:

aside {
  background: blue;
  color: white;
}

然后把它导入到一个css规则内:

.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

被导入的局部文件中定义的所有变量和混合器,也会在这个规则范围内生效。这些变量和混合器不会全局有效,这样就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。

原生的CSS导入

由于sass兼容原生的css,所以它也支持原生的CSS@import。尽管通常在sass中使用@import时,sass会尝试找到对应的sass文件并导入进来,但在以下三种情况下会生成原生的CSS@import,尽管这会造成浏览器解析css时的额外下载:

  1. 被导入文件的名字以.css结尾

  2. 被导入文件的名字是一个URL地址

  3. 被导入文件的名字是css的url()值

也即,不能用sass的@import直接导入一个原始的css文件,因为css会认为想用css原生的@import。但是,sass的语法完全兼容css,可以把原始的css文件改名为.scss后缀,即可直接导入。