基於顏色變量生成背景和文本類

Question

我期待利用SASS規則（@mixin，@extend等）和/或控制指令（@if，@for，@each等）來生成我定義的顏色變量的類。

下面是我目前正在使用的一個示例，但我知道我可以進一步簡化，使其顯着減少冗餘。

// Colors 
$navy: #37455a; 
$blue: #abbdd3; 
$cyan: #a3d9cb; 
$peach: #ff9d7a; 

// Backgrounds 
.bg-navy{ 
    background: $navy; 
} 

.bg-blue{ 
    background: $blue; 
} 

.bg-cyan{ 
    background: $cyan; 
} 

.bg-peach{ 
    background: $peach; 
} 

// Text 
.text-navy{ 
    color: $navy; 
} 

.text-blue{ 
    color: $blue; 
} 

.text-cyan{ 
    color: $cyan; 
} 

.text-peach{ 
    color: $peach; 
} 

我已經嘗試了幾種不同的方法，但我總是遇到與映射衝突。我想保留對象中的映射變量以在這些函數之外使用。這是我到目前爲止：

// Colors for use in other partials 
$navy: #37455a; 
$blue: #abbdd3; 
$cyan: #a3d9cb; 
$peach: #ff9d7a; 

// Mapped colors used for generating classes (Duplicated unfortunately) 
$colors: (
    $navy: #37455a; 
    $blue: #abbdd3; 
    $cyan: #a3d9cb; 
    $peach: #ff9d7a; 
) 

// Background class definition 
@mixin bg{ 
    .bg-#{$color}{ 
    background: $color; 
    } 
} 

// Text class definition 
@mixin text{ 
    .text-#{$color}{ 
    color: $color; 
    } 
} 

// Background class generation 
@each $color in $colors{ 
    @include bg($color); 
} 

// Text class generation 
@each $color in $colors{ 
    @include text($color); 
} 

雖然我上面沒有工作，它更接近我嘗試做的事情。有人解答我在這裏試圖做什麼？任何有識之士都會非常感激！

Answer 1

一個mixin做到這一切！

$navy: #37455a; 
$blue: #abbdd3; 
$cyan: #a3d9cb; 
$peach: #ff9d7a; 

$colors: (
    navy: $navy, 
    blue: $blue, 
    cyan: $cyan, 
    peach: $peach 
); 

@mixin gen-props($prefix, $property) { 
    @each $color-name, $color in $colors { 
    .#{$prefix}-#{$color-name} { 
     #{$property}: $color 
    } 
    } 
} 

@include gen-props('text', 'color'); 
@include gen-props('bg', 'background');