0
我正在建立一個生活styleguide並希望從我們的colors.scss文件中自動生成顏色信息。我的目標是儘可能簡單和簡單地維護顏色列表。我目前的設置是這樣的：構建SCSS的styleguide顏色
$colors: (
// Variable Name Color Hover Description
white: 'White' #ffffff #CCCCCC 'Use this for page background and text color on dark elements',
black: 'Black' #000000 #333333
);
在另一個文件中：
@function color($label) {
$color: map-get($colors,$label);
@if $color{
@return nth($color, 2);
}
@warn 'No specified color for "#{$label}"; add your own to colors.scss';
@return null;
}
.color-values-data {
font-family: sassToJs($colors);
}
我使用sass-to-js將數據傳遞到JavaScript和規劃建設與信息的彩色圖表。我可以使用的顏色在我的樣式表是這樣的：
.heading {
color: color(white);
}
有沒有一些方法，我可以簡化或改進呢？例如，我寧願使用$white而不是color(white)，但我相信在SCSS之前需要額外的編譯步驟，因爲它不支持動態變量名稱。
該項目沒有使用任何現有的styleguide引擎，因爲它需要爲我們正在使用的CMS（Magnolia）生成一個UI模塊，這種方法允許我們在styleguide中使用與實際網站本身完全相同的組件。