SCSS语法

SCSS语法 - @at-root、@include、Mixin Directives


一、@Rules and Directives

1、@at-root

在@at-root指示词范围内,其模式在编译后将独立出来,

并不会被包在父层里面。

scss输入

.error {
    border: 1px #f00;
    background-color: #fdd;

    @at-root {
        .child {
            color: red;
        }
    }
}

css输出

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.child {
  color: red;
}

在@media里面则使用@at-root指示词加上“(with)或(without)”则可以达成不同目地,罗列如下

a、

scss输入

@media print {
    .error {
        border: 1px #f00;
        background-color: #fdd;

        @at-root (without: rule) {
            .child {
                color: red;
            }
        }
    }
}

css输出

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .child {
    color: red;
  }
}

b、

scss输入

@media print {
    .error {
        border: 1px #f00;
        background-color: #fdd;

        @at-root (without: media) {
            .child {
                color: red;
            }
        }
    }
}

css输出

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
}
.error .child {
  color: red;
}

c、

scss输入

@media print {
    .error {
        border: 1px #f00;
        background-color: #fdd;

        @at-root (without: all) {
            .child {
                color: red;
            }
        }
    }
}

css输出

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
}
.child {
  color: red;
}

2、@debug、@warn、@error

@debug、@warn、@error这三个指示词都对于scss侦错都很有帮助,暂不举例。

二、Miinx directive

@mixin指示词的用途类似“方法”,需搭配@include使用,

可以跟@extend、function比较看看。

scss输入

/*里面可以只放属性*/
@mixin red-property {
    color: red;
}

.page-title {
    @include red-property;
}

/*里面可以包含元素*/
@mixin red-element {
    p {
        color: red;
    }
}

.page-title2 {
    @include red-element;
}

/*可以单独使用include*/
@include red-element;

css输出

@charset "UTF-8";
/*里面可以只放属性*/
.page-title {
  color: red;
}

/*里面可以包含元素*/
.page-title2 p {
  color: red;
}

/*可以单独使用include*/
p {
  color: red;
}

另外@include也可以配合参数使用

scss输入

@mixin mack-color($value) {
    color: $value;
}

.box {
    @include mack-color(#fff);
}

css输出

.box {
  color: #fff;
}

对于所定义的参数可以设定默认值

scss输入

@mixin mack-color($value, $width: 100px) {
    color: $value;
    width: $width;
}

.box {
    @include mack-color(#fff);
}

css输出

.box {
  color: #fff;
  width: 100px;
}

可以特别注明参数名称

scss输入

@mixin mack-color($value, $width: 100px) {
    color: $value;
    width: $width;
}

.box {
    @include mack-color($value:#fff);
}

css输出

.box {
  color: #fff;
  width: 100px;
}

Variable Arguments

如果参数是变动的,可以使用如“$args...”形式放入@mixin来代入

scss输入

@mixin box-shadow($shadows...) {
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}

.shadows {
    @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

css输出

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

另一种“$args...”是放在@include里

scss输入

@mixin colors($text, $background, $border) {
    color: $text;
    background-color: $background;
    border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;

.primary {
    @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);

.secondary {
    @include colors($value-map...);
}

css输出

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

另一种“$args...”例子

scss输入

@mixin stylish-mixin($color,$width) {
    color: $color;
    width: width;
}

@mixin wrapped-stylish-mixin($args...) {
    font-weight: bold;
    @include stylish-mixin($args...);
}

.stylish {
    @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

css输出

.stylish {
  font-weight: bold;
  color: #00ff00;
  width: width;
}

可以利用@content指示词来把@include指定的内容代入

scss输入

@mixin apply-to-ie6-only {
    p {
        @content;
    }
}

@include apply-to-ie6-only {
    #logo {
        background-image: url(/logo.gif);
    }
}

css输出

p #logo {
  background-image: url(/logo.gif);
}

@content指示词与变量范围的关系

scss输入

$color: white;

@mixin colors($color: blue) {
    background-color: $color;
    @content;
    border-color: $color;
}

.colors {
    @include colors {
        color: $color;
    }
}

css输出

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

参考数据:

Autoprefixer:最佳的 CSS 供应商前缀(Vender Prefixes)后处理器