有条件地输出一部分 SCSS 规则选择器

Question

我想为一组 class 指定额外的默认快捷方式 class，类似于

@each $pos, $some-css-rules in ("left": ..., "right": ..., ...) {

  @if $pos == "left" {
    .block,
  }

  .block-#($pos) {
     ...
  }
}

将输出为

.block,
.block-left {
  ...
}

.block-right {
  ...
}

但是，它会遇到 .block, 语法错误。

.block-left 不能在这里替换为 .block.left，因为 $pos 会与现有的 class 冲突（.left，等等）。

如果可能的话，我宁愿避免.block { @extend .block-left }，有相当多的类似规则可以通过这种方式获得大量 WET 代码。

有没有办法有条件地输出规则选择器的一部分？ SCSS 和 CSS 如何以这样的模式保持干燥？

Answer 1

我不确定我是否理解问题，但我根据您的代码实现了输出 CSS。我将 @if 指令放在选择器中以与 $pos 变量进行比较。这是我的代码：

SASS

@each $pos, $some-css-rules in ("left": red, "right": blue) {
  .block-#{$pos} {
  @if $pos == "left" {
    @at-root .block, &{
    color:$some-css-rules;
    }
  } 
    @else{
      color:$some-css-rules;
    }
  }
}

输出

.block, .block-left {
  color: red;
}

.block-right {
  color: blue;
}

有条件地输出一部分 SCSS 规则选择器

Conditionally output a part of SCSS rule selector

sass

node-sass