通串入青菜混入可變

-1

我有一個非常簡單的mixin看起來像這樣：通串入青菜混入可變

@mixin global($variable-name) { 
    font-size: #{$variable-name}-font-size; 
}

我以前定義的變量$輸入字體大小，並將其傳遞到混入按以下格式

@include global(input);

問題是SASS不將其轉換和瀏覽器返回：

字體大小：輸入字體大小

我應該怎樣編寫我的mixin來實際返回$ input-font-size的值？

非常感謝您的建議！

來源

2017-05-31 Dom

您不能在sass中創建動態變量。

'＃{}'表示它會將任何屬性轉換爲其純CSS樣式，它不會被視爲一個變量，它將被視爲一個文本。

你可以做的是創建一個屬性列表的地圖，並在mixin中調用它們。

$input-font-size: 16px; 
$textarea-font-size: 14px; 


$var-map: (
    input: $input-font-size, 
    textarea: $textarea-font-size, 
); 

@mixin global($variable-name) { 
    font-size: map-get($var-map, $variable-name); 
} 

body { 
    @include global(input); 
}

，或者如果你不想創建地圖，那麼你可以在混入

@mixin sec($variable-name) { 
    font-size: $variable-name; 
} 
.text-area { 
    @include sec($textarea-font-size); 
}

樣品筆 https://codepen.io/srajagop/pen/aWedNM

來源

2017-05-31 05:26:54 karthick

感謝@karthick簡單地傳遞變量名。這對於一個小混音來說可以很好地工作。問題是我的mixin非常龐大，地圖將永遠存在。 – Dom

hmm。如果你想對變量做簡短的標記，那麼這就是要走的路。否則，你總是可以直接傳遞變量名稱。mixin global（$ variable-name）{font-size：$ variable-name;幷包含它，如包含全局（$ input-font-size）; – karthick

你仍然會在sass文件中擁有儘可能多的變量嗎？那麼爲什麼創建一個地圖是一項重大任務。您可以創建一個存在所有變量的var文件，然後創建一個具有相同變量的映射文件。只是你會在變量前加上一個關鍵字。 – karthick

通串入青菜混入可變

回答

相關問題