-
css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。
-
sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来。另外,所有在被导入文件中定义的变量和混合器均可在导入文件中使用。
-
使用SASS部分文件;
那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。
sass局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。@import "sass文件的路径";
局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时,这非常有用。
- 默认变量值;
一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。
也可以定制修改sass库文件中的某些值,使用sass的!default标签可以实现这个目的。
!default含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
- 嵌套导入
跟原生的css不同,sass允许@import命令写在css规则内。这种导入方式下,生成对应的css文件时,局部文件会被直接插入到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被导入文件的名
1.以.css结尾;
2.被导入文件的名字是一个URL地址
3.被导入文件的名字是CSS的url()值。
因为sass的语法完全兼容css,所以你也可以把原始的css文件改名为.scss后缀,即可直接导入了。
- 静默注释;
在原生的css中,注释对于其他人是直接可见的,但sass提供了一种方式可在生成的css文件中按需抹掉相应的注释。格式为//
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
实际上当注释/* */出现在原生css不允许的地方,如在css属性或选择器中,这些注释也会被抹掉。
color /* 这块注释内容不会出现在生成的css中 */: #333;