如何在定義整個地圖之前引用地圖中的變量？

Question

我會用我的代碼開始，因爲它應該是更容易明白我想做的事：

@function get-color($color, $lightness) { 
    @return map-get(map-get($colors, $color), $lightness); 
} 

$colors: (
    green: (
    light: #A4EDE1, 
    mid: darken(get-color(green, light), 20%), 
    dark: darken(get-color(green, mid), 20%) 
), 

    red: (
    light: complement(get-color(green, light)), 
    mid: complement(get-color(green, mid)), 
    dark: complement(get-color(green, dark)) 
) 
); 

正如你所看到的，我創建了一個多維地圖，我的顏色值。
目前，我想創建其他顏色，通過darken()和complement()函數。 問題在於，我需要在變量被完全填充之前引用$colors變量中的變量。這導致我的get-color()函數出錯，這告訴我，沒有$colors變量。

我知道這將有可能改變我的$colors地圖以外的顏色，但這樣做的好處是，我總是可以回來定義顏色值，而不是生成的。這對維護項目將是一個巨大的好處。

所以在這裏我的問題：有沒有什麼辦法在定義整個地圖之前引用地圖中的另一個變量？

Answer 1

否。只有在最後達到分號時纔會定義映射。所以在此之前你不能引用它的任何部分。

$base-color: #A4EDE1; 
$colors: (
    green: (
    light: $base-color, 
    mid: darken($base-color, 20%), 
    dark: darken($base-color, 40%) 
), 
); 

$colors: map-merge($colors, (
    red: (
    light: complement(get-color(green, light)), 
    mid: complement(get-color(green, mid)), 
    dark: complement(get-color(green, dark)) 
))); 

.foo { 
    color: get-color(red, mid); 
} 

除非你遍歷的映射，我會使用映射到存儲你的顏色變量建議不。相反，這將是最好只寫一個函數，將做操作爲您提供：

$base-color: #A4EDE1; 

@function get-color($lightness, $variation: null, $color: $base-color) { 
    $color: if($variation, call($variation, $color), $color); 

    @if $lightness == medium { 
    @return darken($color, 20%); 
    } @else if $lightness == dark { 
    @return darken($color, 40%); 
    } 
    @return $color; 
} 

.foo { 
    color: get-color(mid); 
    border: 1px solid get-color(mid, complement); 
}