Scss学习--关于Scss指令@at-root、@warn、@debug、@error

@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也可以）