Sass 基础(八)
@import
Sass 支持所有css 的@规则，以及一些Sass 专属的规则，也被称为“指令（directive）”.这些规则在Sass 中具有不同的
功效，详细解释如下。
@import
Sass 扩展了CSS 的@import 规则，让它能够引入 SCSS 和 Sass
文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一
的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
@import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并
直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：
如果文件的扩展名师 .css
如果文件名以 http:// 开头
如果文件名师url().
如果@import 包含了任何媒体查询（media queries）
如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试
着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。 例如：
@import "foo.scss";
或
@import "foo";
两者都将引入foo.scss文件，而
@import "foo.css"
@import "foo" screen
@import "http://foo.com/bar";
@import url(foo);
将被编译为：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
也可以通过一个 @import 引入多个文件。例如：
将引入 rounded-corners 和text-shadow 两个文件。
编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划
线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。
然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文
如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被件名前面的下划线。
例如，你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了， 而且你还可以这样做：
@import "colors";//不用加下划线
来引入 _colors.scss 文件。
注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存。
嵌套 @import
虽然大部分时间只需要在顶层文件使用 @import 就行了，但是，你还可以把他们包含在css 规则和@media 规则中。
然后这样引用：
#main {
@import "example";
}
编译出来的 CSS：
#main .example {
color: red;
}
@media
Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另
外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一
个简单示例：
.siderbar{
width:300px;
@media screen and (orientation: landscape){
width:500px;
}
}
编译出来;
.sidebar{
width:300px;
}
@media screen and ( orientation : landscape){
.sidebar{
width:500px;
}
}
@media 也可以嵌套@media:
@media screen{
.sidebar{
@media (orientation: landscape){
width:500px;
}
}
}
在使用@media 时还可以使用#{}：
$media :screen; $feature:-webkit-min-device-pixel-ratio; $value:1.5; @media #{$media} and ($featrue:$value){ .sidebar{ width:500px; } }
编译出来的css：
@media screen and (-webkit-min-device-pixel-ratio；1.5){
.sidebar{
width:500px;
}
}
@extend
Sass 中的@extend 是用来扩展选择器或者占位符，比如
.error{ border:1px #f00; background-color:#fdd; } .error.intrusion{ background-image:url("/image/hacked.png"); } .seriousError{ @extend .error; border-width:3px; }
被编译为：
.error, .seriousError{ border:1px #f00; background-color:#fdd; } .error .intrusion, .seriousError .intrusion{ background-image: url("/image/hacked.png"); } .seriousError{ border-width：3px; }
扩展选择器：
@extend 不止扩展类选择器，还可以扩展任何选择器，比如 .special.cool, a:hover, 或 a.user[href^="http://"] 例如
.hoverlink{ @extend a:hover; } a:hover{ text-decoration:underline; }
编译出来：
a:hover, .hoverlink{ text-decoration:underline; } .hoverlink{ @extend a:hover; } .comment a.user:hover{ font-weight:bold; }
编译出来的CSS
.comment a.user:hover, .comment .user .hoverlink{ font-weight:bold; }
多个扩展
所设某个样式要继承多个地方的样式，那么可以使用@extend 来继承的多个选择器或者占位符的样式，如：
.error{ border:1px #f00; background-color:#fdd; } .attention{ font-size：3em; background-color:#ff0; } .seriousError{ @extend .error; @extend .attention; border-width：3px; }
编译出来的css
.error, seriousError{ border-width:3px; }
扩展单一选择器
前面我们知道 %placeholder 不使用@extend显示调用是不会生成
任何样式代码。那么在选择器中使用占位符一样。比如下面的代码
#context a%extreme{ color:blue; font-weight:bold; font-size：2em； }
这段代码在不调用之前不产生任何代码，只有能过@extend调用之后才生成代码：
.notice{ @extend %extreme; }
编译出来的CSS
#context a.nontice{ color:blue; font-weight:bold; font-size：2em; }
@at-root
@at-root 从字面上解释就是跳出跟元素。当你选择器嵌套多层之
后，想让某个选择器跳出，此时就可以使用 @at-root。来看一个
简单的示例：
.a{ color:red; .b{ color:orange; .c{ color:yellow; @at-root .d{ color:green; } } } }
编译出来的css
.a{
color:red;
}
.a .b{
color:orange;
}
.a .b .c{
color:yellow;
}
.d{
color；green;
}
@debug
@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了
@debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:
@debug 10em +12em;
会输出：
Line 1 EEBUG: 22em
@warn
@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass。如：
@mixin adjust-location($x,$y){ @if unitless($x){ @warn "Assuming #{$x} to be in pixels"; $x: 1px *$x; } @if unitless($y){ @warn "Assuming #{$y} to be in pixels" $y: 1px *$y: } position:relative; left:$x; top:$y; }
@error
@error 和@warn,@debug 功能是如出一辙。
@mixin error($x){ @if $x < 10{ width:$x * 10px; }@else if $x == 10{ width:$x; }@else{ @error "你需要将#{$x}值设置在10以内的数"; } } .texst{ @include error(15); }
编译的时候：
你需要将15 值设置在10 以内的数 on line 7 at column5
