SASS顏色重量密新

Question

我試圖創建顏色重量混入。結果將會是Google Material的顏色權重（https://material.io/guidelines/style/color.html#color-color-palette）。

我希望的功能，我可以通過基礎顏色，它會減輕/變暗每個權重生成每一個權重變量和類。

採取以下手工完成的權重：

$color-blue: #1483ff; 
$color-blue-100: lighten($color-blue, 30%); 
$color-blue-200: lighten($color-blue, 20%); 
$color-blue-400: lighten($color-blue, 10%); 
$color-blue-500: $color-blue; 
$color-blue-600: darken($color-blue, 10%); 
$color-blue-700: darken($color-blue, 20%); 
$color-blue-800: darken($color-blue, 30%); 
$color-blue-900: darken($color-blue, 40%); 

我與一些實驗是這樣的：

$colors: $color-blue-100, $color-blue-200, $color-blue-300; 

@for $c from 1 through length($colors)-1 { 
    .bg-blue-#{$i} { 
    background: $c; 
    } 
} 

但是，這並不工作，我還是要手動定義的變量。

Answer 1

這應該這樣做，並沒有變量來定義。您可以在sassmeister上看到輸出。

@mixin color-weight ($class, $base-color, $weight: 4) { 
    $bg-color: null; 

    @for $i from 1 through 8 { 
    @if $i < 4 { 
     $weight: $weight - 1; 
     $bg-color: lighten($base-color, $weight * 10%); 
    } @else if $i == 4 { 
     $weight: 0; 
     $bg-color: $base-color; 
    } @else { 
     $weight: $weight + 1; 
     $bg-color: darken($base-color, $weight * 10%); 
    } 

    .#{$class}-#{$i} { background-color: $bg-color; } 
    } 
} 

@include color-weight(bg-blue, #1483ff); 
@include color-weight(mad, red); 

Answer 2

我把迭代一個預定義的「調色板」裏的權重和比例都是靜態的，以及對顏色的方法。你所要做的就是添加/改變定義的顏色。

$colors : (
"blue" : #1483ff, 
"green" : #4CAF50, 
"yellow" : #FFEB3B, 
); 

$palette : (
    100 : 40%, 
    200 : 30%, 
    300 : 20%, 
    400 : 10%, 
    500 : 0, 
    600 : 10%, 
    700 : 20%, 
    800 : 30%, 
    900 : 40% 
); 

@each $name, $hex in $colors { 
    @each $weight, $percentage in $palette { 
    @if $weight < 500 { 
     .bg-#{"" + $name}-#{$weight} { 
     background-color: lighten($hex, $percentage); 
     } 
    } @else if $weight > 500 { 
     .bg-#{"" + $name}-#{$weight} { 
     background-color: darken($hex, $percentage); 
     } 
    } @else { 
     .bg-#{"" + $name}-#{$weight} { 
     background-color: $hex; 
     } 
    } 
    } 
} 

哪個編譯成

.bg-blue-100 { 
    background-color: #e0efff; 
} 

.bg-blue-200 { 
    background-color: #add4ff; 
} 

.bg-blue-300 { 
    background-color: #7ab9ff; 
} 

.bg-blue-400 { 
    background-color: #479eff; 
} 

.bg-blue-500 { 
    background-color: #1483ff; 
} 

.bg-blue-600 { 
    background-color: #006ae0; 
} 

.bg-blue-700 { 
    background-color: #0052ad; 
} 

.bg-blue-800 { 
    background-color: #003a7a; 
} 

.bg-blue-900 { 
    background-color: #002247; 
} 

.bg-green-100 { 
    background-color: #d9eeda; 
} 

.bg-green-200 { 
    background-color: #b5dfb7; 
} 

.bg-green-300 { 
    background-color: #92cf94; 
} 

.bg-green-400 { 
    background-color: #6ec071; 
} 

.bg-green-500 { 
    background-color: #4CAF50; 
} 

.bg-green-600 { 
    background-color: #3d8b40; 
} 

.bg-green-700 { 
    background-color: #2d682f; 
} 

.bg-green-800 { 
    background-color: #1e441f; 
} 

.bg-green-900 { 
    background-color: #0e210f; 
} 

.bg-yellow-100 { 
    background-color: white; 
} 

.bg-yellow-200 { 
    background-color: #fffbd4; 
} 

.bg-yellow-300 { 
    background-color: #fff5a1; 
} 

.bg-yellow-400 { 
    background-color: #fff06e; 
} 

.bg-yellow-500 { 
    background-color: #FFEB3B; 
} 

.bg-yellow-600 { 
    background-color: #ffe608; 
} 

.bg-yellow-700 { 
    background-color: #d4be00; 
} 

.bg-yellow-800 { 
    background-color: #a19100; 
} 

.bg-yellow-900 { 
    background-color: #6e6300; 
}