6、SASS-混入指令

6、混入指令

混入

• 混入(mixin)定義能夠在整個樣式表中重複使用的樣式，而避免了使用無語意的類,相似js方法

混入能夠帶arguments，引入變量，只需少許的混入(mixin)代碼就能輸出多樣化的樣式

• 混入(mixin)經過 @mixin 指令定義。在它後面跟混入的名稱和任選的arguments（參數），以及混入的內容塊

@mixin large-text {
  font: {
    family: Arial;
    weight: bold;
  }
  color: #ff0000;
}
調用：@include large-text;
複製代碼

• 使用 @include 指令能夠將混入（mixin）引入到文檔中

.page-title { @include large-text; padding: 4px; margin-top: 10px; } 編譯爲：
.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }
複製代碼

• 混入（mixin）能夠用 SassScript 值做爲參數，給定的參數被包括在混入（mixin）中而且做爲爲變量提供給混入（mixin）

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
        width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }
編譯爲：
          
p { border-color: blue; border-width: 1in; border-style: dashed; }
複製代碼

• 混入（mixin）也能夠使用普通的變量賦值語法爲參數指定默認值，當調用混入的時候，若是沒有給參數賦值，則自動會使用默認值代替

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
        width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
編譯爲：
          
p { border-color: blue; border-width: 1in; border-style: dashed; }
h1 { border-color: blue; border-width: 2in; border-style: dashed; }
複製代碼

• 混入（mixin）在引入（@include指令）的時候也能夠使用明確的關鍵字參數

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }
複製代碼

• 可變參數：有時，不能肯定一個混入（mixin）或者一個函數（function）使用多少個參數時

@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
編譯爲：
          
.shadows { box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; }
複製代碼

• 可變參數能夠包含任何關鍵字參數傳遞給混入（mixin）或者函數（function）

@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...);
}
編譯爲：
          
.primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff; }
.secondary { color: #00ff00; background-color: #0000ff; border-color: #ff0000; }
複製代碼

• 樣式內容塊能夠傳遞到混入（mixin）包含樣式的位置。樣式內容塊將出如今混入內的任何 @content 指令的位置。這使得能夠定義抽象 關聯到選擇器和指令的解析

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
生成:         
          
* html #logo { background-image: url(/logo.gif); }
複製代碼

• 傳遞給混入（mixin）的內容塊在其被定義的做用域中進行運算，而不是混入（mixin）的做用域

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}
編譯爲:
          
.colors { background-color: blue; color: white; border-color: blue; }
複製代碼

函數指令

• Sass 支持自定義函數，並能在任何值或腳本上下文中使用

$grid-width: 40px;
$gutter-width: 10px;
    
@function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
編譯成:
          
#sidebar { width: 240px; }
複製代碼

• 函數能夠訪問任何全局定義的變量，以及接受參數，跟混入相似
• 函數能夠包含語句，而且必須調用@return來設置函數的返回值