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中使用与实际网站本身完全相同的组件。