以这种方式使用 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 个不同的列表中

也许是字体之类的东西。因为您经常想知道“我在哪里使用这种字体？”。不过我还是很怀疑。