SASS/SCSS，如何从部分文件动态访问属性/方法

Question

例如，我们有下一个sass部分文件：

//_colors.scss
$foo: red;

而我们"；使用"；它在另一个文件上：

//test.scss
@use './colors'
.test{
color: colors.$foo;
}

一切都很好，但如果我想在mixin中以动态方式使用/获取值呢？类似于：

//test.scss
@use './colors'
@mixin getColor($type){
color: colors[$type]; //JavaScript example, * don't actually work *.

or 
color: #{colors.{$type}; * don't work neither * 
//The above returns `color: colors.foo` instead of `color: red` on compilation.

or 
color: colors.#{$type}; * doesn't work neither *
}
.test{
@include getColor(foo);
}

有可能吗？谢谢你的帮助！

Answer 1

对于颜色，我非常喜欢一个函数，这样它就可以用于任何属性(颜色、背景色、边框、框阴影…(

我通常声明一个相当于变量名的字符串，然后在映射中定义它们。最后，可以通过专用功能访问此地图。

类似的东西

//_colors.scss
@use 'sass:map';
$favoriteRed: "favoriteRed";
$favoriteYellow: "favoriteYellow";
$favoriteBlue: "favoriteBlue";
$MyColors: (
$favoriteRed: #c00,
favoriteYellow: #fc0,
$favoriteBlue: #0cf
);
@function my-color($tone: $favoriteRed) {
@if not map.has-key($MyColors, $tone) {
@error "unknown `#{$tone}` in MyColors.";
}
@else {
@return map.get($MyColors, $tone);
}
}

这个_colors.scss根本不生成任何代码，可以在任何地方免费导入。然后，在一个特定的样式文件中：

//test.scss
@use './colors' as *;
//inside a mixin
@mixin special-hue-component($tone){
div.foo {
span.bar {
border-color: my-color($tone);
}
}
}

//or directly
.foobartest {
color: my-color($favoriteBlue);
}