@at-root
将标签放到根路径下
.parent{
width: 600px/960px*100%;
height: 300px/960px*100%;
@at-root .child{
width: 200px;
height: 250px;
}
.brother{
background-color: palegreen;
@at-root .his_son{
font-size: 25px;
}
}
}
//编译为
.parent{
width: 600px/960px*100%;
height: 300px/960px*100%;
.brother{
background-color: palegreen;
@at-root .his_son{
font-size: 25px;
}
}
}
.child{
width: 200px;
height: 250px;
}
@at-root(with…)
@at-root(without…) 移动到…指令之外
默认的@at-root 就是 @at-root(rule)
// @media p{
div{
overflow: hidden;
@at-root .his_son {
color: #000;
}
@at-root (with: media) { /*!不会跳出media*/
p{
color: red;
}
}
@at-root (without:media){ /*!将会跳出media*/
p{
color: red;
}
}
}
}
@debug
将sasscript表达式的值打印到标准错误输出流,它对于调试Sass文件非常有用
@debug 10em+12em;
注意:可以在控制台中看到结果(cmd也可以)
@warm
指令将sasscript表达式的值打印到标准错误输出流
对于那些需要警告用户不推荐使用或从轻微mixin使用错误中恢复的库来说
它非常有用
@mixin adjust-location($x, $y){
@if unitless($number: $x){
@warn "Assuming #{$x} to be in pixels";
$x:1px * $x;
};
@if unitless($number: $y){
@warn "Assuming #{$y} to be in pixels";
$y:1px * $y;
};
position: relative;
left: $x;
top: $y;
}
.divbox{
@include adjust-location(1,2);
}
div{
height: 20px;
width: 20px;
@warn "Dont't set unnumber type";
}
注意:可以在控制台中看到结果(cmd也可以)
@error
调用时的错误判断,将sasscript表达式的值作为致命错误抛出,包括一个很好的堆栈跟踪,对于验证mixin和函数的参数非常有用
@mixin adjust-location($x, $y){
@if unitless($number: $x){
@error "$x may not be unitless,was #{$x}";
};
@if unitless($number: $y){
@error "$y may not be unitless,was #{$y}";
};
position: relative;
left: $x;
top: $y;
}
$error_x:10;
.divbox{
@include adjust-location(1,2px);
}
注意:可以在控制台中看到结果(cmd也可以)