カラー変数に基づいて背景とテキストのクラスを生成する

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

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');