Question

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

@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会与现有的类（.left等）发生冲突。

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

有条件输出规则选择器的一部分吗？ SCSS和CSS如何以这样的模式保持DRY？

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规则选择器

1 个答案: