首页 > 代码库 > Sass--@Rules指令
Sass--@Rules指令
文件导入 @import "fileName.scss"
文件导入后,其变量和指令都可以在这个文件中使用
例 1
1.scss
$str1: "str1 words";$str2: "str2 words";
global.scss
@import "1.scss";body{ .outside{ width: 500px; height: 300px; background: gray; &:before{ content: $str1; } &:after{ content: $str2; } }}
终端
sass --watch scss:css
global.scss编译后
body .outside { width: 500px; height: 300px; background: gray; } body .outside:before { content: "str1 words"; } body .outside:after { content: "str2 words"; }
但这样会导致1.scss文件也被编译一次,生成不必要的1.css
分音
如果需要导入scss文件,又不需要其被编译,可以在其文件名前加一个下划线。导入语句不需要修改。
注意:不要让文件夹中同时存在 1.scss 和 _1.scss ,会报错
@import嵌套
将上面的global.scss修改为
body{ .outside{ width: 500px; height: 300px; background: gray; &:before{ content: $str2; } .inside{ @import "1.scss"; width: 100px; height: 100px; background: red; &:after{ content: $str1; } } }}
报错:找不到$str2。
这也算作一个作用域的问题。
@media
Sass中@media指令和Css中用法相同,但允许嵌套,引用变量
.outside{ width: 500px; height: 300px; $selectMedia: screen; $maxWidth: max-width; $minWdith: min-width; @media #{$selectMedia} and (#{$minWdith}: 1000px){ background: red; }}
编译后
.outside { width: 500px; height: 300px; } @media screen and (min-width: 1000px) { .outside { background: red; } }
~END
Sass--@Rules指令
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。