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）後處理器