loops - 每个循环目标动态选择器上的 SCSS 不会产生结果

Question

具有以下 scss

$categories: (".category .category-future-history, .category .category-future-history-en" : var(--violet), ".category .category-out-of-the-box, .category .category-out-of-the-box-en" : var(--raspberry), ".category .category-events, .category .category-events-en" : var(--blue-4), ".category .category-technology, .category .category-technology-en" : var(--blue-5), ".category .category-corporate, .category .category-corporate-en" : var(--blue-3),".category .category-management, .category .category-management-en" : var(--blue-1),".category.focus, .category.focus-en": var(--focus-color), ".category.sports, .category.sports-en" : var(--sport-color), ".category.people, .category.people-en": var(--people-color), ".category.talents, .category.talents-en": var(--talents-color), ".category.worldwide, .category.worldwide-en": var(--worldwide-color) );


@each $category, $color in $categories {
  #{$category} {
    .quote-module-wide {
      border-color: $color;
      background: none !important;
    }
  }
}

这里是混合

@mixin categories-border($selector) {
  @each $category, $color in $categories {
    #{$category} {
      #{$selector} {
        border-color: $color;
        background: none !important;
      }
    }
  }
}

我尝试根据选择器在每个 CSS 上生成一些 CSS，但在我的情况下，此代码不会生成任何样式表。这种方法有什么问题？

标签： loopsselectormixinsscss-mixins