如何正确生成 Sass 主题 [英] How to properly generate Sass Themes
本文介绍了如何正确生成 Sass 主题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要根据 sass 变量生成 css.如何转:
$themes: (光: (文字:黑色),黑暗的: (文字:白色));.foo {显示:弹性;颜色:@include theify('text');}
进入这个:
.foo {显示:弹性;}.light .foo {颜色:#000;}.dark .foo {颜色:#fff;}
对如何实现这一点有任何想法吗?
解决方案
您不能使用 mixin 重用颜色declaration
,因此您需要将其传递给 mixin.>
检查一下
$themes: (光: (文字:黑色),黑暗的: (文字:白色));@mixin themify($prop, $key, $themeList: $themes) {@each $themeName , $theme 在 $themeList {$value: map-get($theme, $key);.#{$value} {#{$prop}: $value;}}}.foo {显示:弹性;@include theify('color', 'text');}
结果将是:https://gist.github.com/felixmosh/c8110a95a0a52bd369b23f88e525">
I need to generate css based on sass variables. How to turn this:
$themes: (
light: (
text: black
),
dark: (
text: white
)
);
.foo {
display: flex;
color: @include themify('text');
}
Into this:
.foo {
display: flex;
}
.light .foo {
color: #000;
}
.dark .foo {
color: #fff;
}
Any ideas of how to implement this?
解决方案
You can't reuse the color declaration
using a mixin, so instead, you need to pass it to the mixin.
Check that out
$themes: (
light: (
text: black
),
dark: (
text: white
)
);
@mixin themify($prop, $key, $themeList: $themes) {
@each $themeName ,$theme in $themeList {
$value: map-get($theme, $key);
.#{$value} {
#{$prop}: $value;
}
}
}
.foo {
display: flex;
@include themify('color', 'text');
}
The result will be: https://gist.github.com/felixmosh/c8110a93ef55a0a52bd369b23f88e525
这篇关于如何正确生成 Sass 主题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文