sass 导入@import详解
@import
Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
创新互联公司从2013年创立,先为广昌等服务建站,广昌等地企业,进行企业商务咨询服务。为广昌企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
例如:
public.scss
$font-base-color:#333;
index.scss
@import "public";
$color:#666;
.container{
border-color: $color;
color: $font-base-color;
}
编译后:
.container { border-color: #666; color: #333; }
注意:跟我们普通css里面@import的区别
但是如下的几种方式,都将作为普通的 CSS 语句,不会导入任何 Sass 文件
- 文件拓展名是 .css;
- 文件名以 http:// 开头;
- 文件名是 url();
- @import 包含 media queries。
@import "public.css";
@import url(public);
@import "http://xxx.com/xxx";
局部文件(Partials)
Sass源文件中可以通过@import指令导入其他Sass源文件,被导入的文件就是*局部文件*,局部文件让Sass模块化编写更加容易。
如果一个目录正在被Sass程序监测,目录下的所有scss/sass源文件都会被编译,但通常不希望局部文件被编译,因为局部文件是用来被导入到其他文件的。如果不想局部文件被编译,文件名可以以下划线 (_)开头
_theme.scss
$border-color:#999;
$background-color:#f2f2f2;
index.scss
@import "public";
@import "theme";
$color:#666;
.container{
border-color: $border-color;
color: $font-base-color;
background-color: $background-color;
}
编译后:
.container { border-color: #999; color: #333; background-color: #f2f2f2; }
可以看到,@import 引入的_theme.scss,可以没有下划线(__),这是允许的,这也就意味着,同一个目录下不能同时出现两个相关名的sass文件(一个不带_,一个带_),添加下划线的文件将会被忽略。
嵌套 @import
大多数情况下,一般在文件的最外层(不在嵌套规则内)使用 @import,其实,也可以将 @import 嵌套进 CSS 样式或者 @media 中,与平时的用法效果相同,只是这样导入的样式只能出现在嵌套的层中。
base.scss
.main-color{
color: #F00;
}
index.scss
.container{
@import "base";
}
最后生成
.container .main-color { color: #F00; }
注意:被导入的文件不能是局部文件方式(在前面不能加_)
当前名称:sass 导入@import详解
网页网址:http://scyanting.com/article/dsojspj.html