Sass 中的 @ 规则

一、 @import

　　Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
　　例如： @import "foo.scss";

二、 @extend 是用来扩展选择器或占位符。

三、 @at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。

　　示例:　　

 1 .a {
 2   color: red;
 3 
 4   .b {
 5     color: orange;
 6 
 7     .c {
 8       color: yellow;
 9 
10       @at-root .d {
11         color: green;
12       }
13     }
14   }  
15 }

　　输出:

1 a {
2   color: red; }
3   .a .b {
4     color: orange; }
5     .a .b .c {
6       color: yellow; }
7       .d {
8         color: green; }

四、错误调试

　　@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug
　　@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass。
　　@error 和 @warn、@debug 功能是如出一辙。

 

转载于:https://www.cnblogs.com/Medeor/p/4976085.html