SASS Mixin參數

Question

我在下面的mixin中傳入了多個參數。我在我的CSS文件中調用了多個地方的mixin;有時需要指定所有的參數，其他時間只有少數。 Ruby允許你使用散列傳遞一個可選的參數。在SASS中是否有這樣的等價物，或者這可以通過命名參數可以以任何順序傳遞以及具有默認值的參數可以省略的事實來消除？

@mixin three-column-header-layout($background_color: #EEEEEE, $left_width: 25%, $mid_width: 50%, $right_width: 25%, $left_line_height: 40px, $mid_line_height: 40px, $right_line_height: normal, $column_height: 40px) { 
    .wrapper { 
    margin: 0 auto; 
    width: 100%; 
    overflow: hidden; 
    } 

    .middleCol { 
    float: left; 
    background: $background_color; 
    height: $column_height; 
    width: $mid_width; 
    display: inline; 
    line-height: $mid_line_height; 
    } 

    .leftCol { 
    background: $background_color; 
    height: $column_height; 
    width: $left_width; 
    float: left; 
    line-height: $left_line_height; 
    } 

    .rightCol { 
    background: $background_color; 
    height: $column_height; 
    width: $right_width; 
    float: left; 
    line-height: $right_line_height; 
    } 
} 

Answer 1

從3.1.7開始，Sass的唯一數據結構就是列表。

正如您所提到的，只有當所有未傳遞的參數都具有默認值時，纔可以使用命名參數的任意組合包含您的mixin。

Answer 2

薩斯3.3添加映射數據結構，你可以把它們作爲參數傳入混入這樣的：

$options: 
    (background_color: red 
    , right_width: 30% 
    , left_width: 20% 
); 

.foo { 
    @include three-column-header-layout($options...); 
} 

注意，但是，人們也可以指定像這樣的參數（這可能是一個3.2功能）：

.foo { 
    @include three-column-header-layout($background_color: red, $right_width: 30%, $left_width: 20%) 
}