重複使用SASS組元素

我想創建一個「組」元素，根據主體類將特定顏色/樣式添加到它們中。重複使用SASS組元素

我正在使用SASS，不想每次都寫相同的元素。

我知道下面的代碼是錯誤的，但你明白了。

是這樣的可能嗎？

@mixin coloured-elements { 
    a:hover, 
    a.site-title, 
    .another-element 
} 
body.blue { 
    @include coloured-elements { 
     color: $blue; 
    } 
} 
body.green { 
    @include coloured-elements { 
     color: $green; 
    } 
} 
body.red { 
    @include coloured-elements { 
     color: $red; 
    } 
} 
body.purple { 
    @include coloured-elements { 
     color: $purple; 
    } 
} 
body.orange { 
    @include coloured-elements { 
     color: $orange; 
    } 
}

來源

2017-02-15 John the Painter

製作出各種顏色元素接受參數，然後定義顏色列表，迭代和動態創建的一切。例如：

@mixin coloured-elements($color) { 
    a:hover, a.site-title, .another-element { 
    color: $color 
    } 
} 

$colors: blue, red, purple, orange; 

@each $color in $colors { 
    body.#{$color} { 
    @include coloured-elements($color); 
    } 
}

請注意，我沒有對此進行處理，您可能需要對其進行調整。檢查文檔以正確執行此操作。

如果您提供了一個codepen，我可以編輯答案。

編輯：

sass lists
，如果你想用這個數據結構
Control directives
Interpolation

來源

2017-02-15 12:20:18 radubogdan

這也很棒。我喜歡定義一個顏色列表的想法，然後重新使用它作爲一個混合。 –

我可以問爲什麼需要哈希'身體。＃{$ color}' –

嗯，我會說這是乾的和慣用的。如果你想引入一種新的顏色，你只需要定義它並將其添加到列表中。如果更改結構並使用哈希映射並更改迭代器，則會得到顏色字典:) – radubogdan

使用&簽出後選擇「是孩子的」。

.element1, 
.element2 { 
    body.orange & { 
    color: orange; 
    } 
    body.blue & { 
    color: blue; 
    } 
}

來源

2017-02-15 12:17:52 Davey

是的！謝謝......看不到樹木的森林 –

可能還有其他一些很好的替代方法。好問題。 – Davey

如果傳遞的內容，你應該使用一個mixin sass hashmaps @內容：

@mixin coloured-elements { 
    a:hover, 
    a.site-title, 
    .another-element { @content; } 
}

在您的例子（使用上述混入），你會得到以下輸出：

body.blue a:hover, 
body.blue a.site-title, 
body.blue .another-element { 
    color: blue; 
} 

body.green a:hover, 
body.green a.site-title, 
body.green .another-element { 
    color: green; 
} 

body.red a:hover, 
body.red a.site-title, 
body.red .another-element { 
    color: red; 
} 

body.purple a:hover, 
body.purple a.site-title, 
body.purple .another-element { 
    color: purple; 
} 

body.orange a:hover, 
body.orange a.site-title, 
body.orange .another-element { 
    color: orange; 
}

來源

2017-02-15 12:26:16

您可以使用@each和#{}插了點。創建$valiable s與selectorName,colorValue pairs然後將它們放入@each指令後in關鍵字，如下例所示。這些對解決了使用不同選擇器名稱和顏色值的問題，例如。 .red {color: #f00};代替.red{color:red}

$blue: blue, #42a5f5; 
$green: green, #66bb6a; 
$red: red, #f44336; 
$purple: purple, #ba68c8; 
$orange: orange, #f57c00; 

a:hover, a.site-title, .another-element { 
    @each $selector, $color in $blue, $green, $red, $purple, $orange { 
     body.#{$selector} { 
      color: $color; 
     } 
    } 
}

CSS的結果將是：

a:hover body.blue, a.site-title body.blue, .another-element body.blue { 
    color: #42a5f5; 
} 

a:hover body.green, a.site-title body.green, .another-element body.green { 
    color: #66bb6a; 
}

...等。

來源

2017-02-15 13:03:23

重複使用SASS組元素

回答

相關問題