0
私はリビングスタイルガイドを構築しており、colors.scssファイルから色情報を自動的に生成したいと考えています。私の目標は、カラーリストをできるだけ簡単かつ簡単に維持することです。私はsass-to-jsを使用してJavaScriptにデータを渡し、その情報に基づいてカラーチャートを構築する計画SCSSのスタイルガイドカラーを作成
@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);
}
：別のファイルで
$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
);
：私の現在の設定はこれです。
.heading {
color: color(white);
}
これを単純化したり、改善したりする方法はありますか？たとえば、私はcolor(white)の代わりに$whiteを使用したいと思いますが、動的変数名をサポートしていないため、SCSSの前に追加のコンパイル手順が必要になると思います。
このプロジェクトでは、使用しているCMS用のUIモジュール（Magnolia）を生成する必要があるため、既存のスタイルガイドエンジンを使用していません。このアプローチでは、スタイルガイドの正確な同じコンポーネントを実際のサイト自体。