在SASS中生成動態彩色地圖

Question

我試圖生成一個相當自動化的系統來定義SASS中的顏色。我有一個用十六進制值定義的顏色列表（如：$color--deep-ocean: #123143;）和全局的$colors:();定義。

然後我想動態地創建它們的RGBA值，並且給定變量插值不是SASS中的一個選項，我試過我的手在地圖上。

的想法是養活set-color功能的名稱和顏色來填充我$colors變量，map-merge，我可以再與get-color檢索。這裏下面是我的兩個函數定義和如何我試圖使用它們：

@function color-set($name, $hex) { 
    $submap: (hex: $hex); 

    @for $o from 0 to 20 { // Going in increments of 5 
     $percentage-decimal: $o*0.05; 
     $percentage: $o*5; 
     $submap: map-merge($submap, ($percentage: rgba($hex, $percentage-decimal))); 
    } 

    $colors: map-merge($colors, ($name: $submap)); 
    /* We should then have a map that looks like this: 
    $colors: (colorname: (
    hex: #000000, 
    0: rgba(0,0,0,0), 
    5: rgba(0,0,0,.05), 
    // and so on… 
    100: rgba(0,0,0,1) 
    ) 
    ) 
    … right? */ 
} 

@function color-get($name, $opacity: hex) { 
    @if $opacity != hex { // Returns RGBA value 
     @return map-get(map-get($colors,$name), $opacity); 
    } 
    @else { // Returns hexidecimal value 
     @return map-get(map-get($colors,$name), hex); 
    } 
} 

請讓我知道，如果我的功能是混亂！我會盡力評論他們。

這是我正在試圖定義一種顏色（的_variables.scss部分）：

color-set(bkgrnd, $color--deep-ocean); 

而這裏的如何，我想用我的色彩：

body { // These colours have been defined, too …supposedly 
    background-color: color-get(bkgrnd, 80); 
    color: color-get(white); 
} 

這裏是錯誤我得到_variables.scss：

「... ackground color」之後無效的CSS：預期1選擇器或at-rule，是「color-set（bkgrnd，$」

所以我覺得我錯過了一些東西。我已經把腦袋纏繞了四個小時，而且我瘋了。這可能是超級簡單的東西，但我似乎無法弄清楚。我隨便使用SASS，所以我可能不知道一些語法問題，但如果任何人有關於如何解決這個問題的線索，我會非常感激。

祝您有美好的一天，感謝您花時間閱讀我的文章！

的問候， 克里斯

PS：我與支架SASS插件支架編譯此，即使有這些信息是相關的。

Answer 1

挖了一些之後，我發現我的問題是。 SASS功能必須具有@return指令才能工作。因此，我更新了我的color-set函數，並在其末尾添加了@return $colors;。然後，我只是需要給一些指令，這樣的功能就不能稱之爲「出於藍」，所以我賦予我的$colors變量，像這樣：

$colors: color-set(bkgrnd, $color--deep-ocean); 

我覺得這可能是一個有點重複重新分配$colors到自己的所有時間，但考慮到這隻會影響編譯過程中的性能，而不是最終的CSS文件，所以我可以避開它。可能有更好的方法（如果你有一個想法，我會全力以赴的！），但現在這符合我的需求。

就這樣，我能夠使用地圖來處理我的顏色。感謝任何看過我的問題的人，並抱歉發佈此消息 - 我應該花一些時間冷靜下來，再想一想。我希望這可以幫助別人解決同樣的問題，解決他們的問題！

保重，

克里斯

PS：要是你想讓它，下面是完整的代碼。

_colors.scss

$color--deep-ocean: #123143; 
$color--yellow: #ffce00; 
// And so on, and so forth… 

_mixins.scss

@function color-set($name, $hexval) { 
    @return map-merge($colors, ($name: $hexval)); 
} 

@function color-get($name, $opacity: hex) { 
    @if $opacity != hex { // Returns RGBA value 
     $opacity-decimal: $opacity/100; 
     @return rgba(map-get($colors,$name), $opacity-decimal); 
    } 
    @else { // Returns hexidecimal value 
     @return map-get($colors, $name); 
    } 
} 

_variables.scss

$colors: color-set(bkgrnd, $color--deep-ocean); 
$colors: color-set(main, $color--yellow); 
// And so on, and so forth again… 

用例：

body { 
    background-color: color-get(bkgrnd); // Returns #123143 
    color: color-get(main); // Returns #ffce00 
} 

button { 
    border: 2px solid color-get(main, 50); // Returns rgba(255, 206, 0, 0.5) 
}