Sass 中的 @ 规则
2015-11-18 22:22
471 查看
一、 @import
Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
例如: @import "foo.scss";
二、 @extend 是用来扩展选择器或占位符。
三、 @at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
示例:
输出:
四、错误调试
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug
@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。
@error 和 @warn、@debug 功能是如出一辙。
Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
例如: @import "foo.scss";
二、 @extend 是用来扩展选择器或占位符。
三、 @at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
示例:
.a { color: red; .b { color: orange; .c { color: yellow; @at-root .d { color: green; } } } }
输出:
a { color: red; } .a .b { color: orange; } .a .b .c { color: yellow; } .d { color: green; }
四、错误调试
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug
@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。
@error 和 @warn、@debug 功能是如出一辙。
相关文章推荐
- ubuntu下执行sql脚本
- 关于STL中vector容器的一些总结
- 添加评论
- 5000字创业日记:创业4个月,我到底做了哪些事情
- 如果使用的是orm,是否还需要关系索引
- ffmpeg 详解
- hdoj1827Summer Holiday【scc+缩点】
- LeetCode20:Valid Parentheses
- InputStreamReader FileReader
- CSS:关于“-webkit-appearance: none”样式使用问题
- 创建工程的新工程中,没有Prefix文件怎么办
- OkHttp解析系列-重定向和出错重试
- spring mvc 传中文 到controller层乱码的 解决方法
- 【Treap】[CQBZOJ2803]普通平衡树
- vector的resize()和reserve()函数的区别
- 装饰者模式——HeaderFirst学习笔记
- UITabBarController
- CSS3画图2
- 运行Java命令行报错 class not found
- 两个栈实现一个队列