标签：and 使用 注意 文件夹 需要 编译 width class 用法
文件导入 @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
标签：and 使用 注意 文件夹 需要 编译 width class 用法
原文地址：http://www.cnblogs.com/jiaoxuanwen/p/7181430.html
