Question

我有一个项目，遗留代码有类似

的类

promo game-promo

我有机会通过更改为scss来清理css，但我想要覆盖的问题是我想要嵌套promo并拥有{{1前置父。

game-

我已经喜欢上述工作，但它并不知道是否有人遇到任何方法来实现我之后的目标？

Answer 1

.game-promo {
  color: black;
  @at-root .promo {
    display: flex;
  }
}

似乎不可能在重新编写代码之后我已经得到了这个。

Answer 2

你无法做你正在尝试的事情。 “＆amp;”用于获取当前选择器，在您的情况下：game-.promo或.game-.promo如果添加类选择器但它无法工作。

在您的情况下，您可以这样做：

.game-promo {
    color: black;
    .promo {
        display: flex;
    }
}

或者重命名你的班级名称:(我举一个反映你名字逻辑的例子）

家长与“.promo”
“.promo-game”

所以你可以这样做：

.promo {
    //properties
    &-game {
        //properties
    }
}

Answer 3

可能但不是很漂亮（code on jsFiddle）：

/** see https://gist.github.com/Bamieh/912a6f0b63cbb53f3ad0bd8df7171c6a */
@function parse-dotless($class) {
  $this: quote($class);
  @return if(str-slice($this, 0, 1) == ".", str-slice($this, 2, str-length($this)), $this);
}

.promo {
  color:yellow;
  @at-root .game-#{parse-dotless(&)} {
    color: blue;
  }
}

<span class="promo">Hello</span>
<span class="game-promo">World</span>

Answer 4

您无法仅使用&功能完全解释您的代码段。相反，您可以构建如下的修饰符类：

.btn {
  &-primary {}
  &-secondary {}
}

将其翻译为：

.btn-primary {}
.btn-secondary {}

在您的代码示例中，您可以反转规则名称：

.promo {
  display: flex;

  &-game {
    color: black;
  }
}

详细了解sass-ampersand

scss前置父选择器

4 个答案: