以这种方式使用SCSS地图是不是一种糟糕的做法

Question

这是一种糟糕的做法还是为什么没有人这么做？我认为这对你在更大的项目中反复使用的某些属性非常有帮助，比如你自己的框架等，因为它可以缩短代码并便于编辑。

$flex: '.nav', 'nav', '.grid', '.row';
$inline-flex: '.button', 'button', '.icon';
@mixin passElement($list, $property, $value) {
%#{$value} {
#{$property}: #{$value};
}
@each $element in #{$list} {
#{$element} {
@extend %#{$value};
}
}
}
@include passElement($flex, display, flex);
@include passElement($inline-flex, display, inline-flex);

这将编译为：

.nav, nav, .grid, .row {
display: flex;
}
.button, button, .icon {
display: inline-flex;
}

Answer 1

我认为它可能很有用，但我相信您现在正在围绕选择器的属性而不是它属于哪个组件来分组代码。

"好的，这个应该是粗体。我的粗体元素列表在哪里">
"接下来，我的红色背景元素列表在哪里">

我知道这并没有那么糟糕，但很明显，当你编辑一个组件时，你希望该组件的所有属性都在一个地方。考虑到这一点，我只能假设.nav将在的20个不同列表中

也许是为了字体之类的东西。因为你经常想知道"；我在哪里使用这种字体&"；。不过我还是很怀疑。