样式上的“组合”是什么

Question

我正在使用 https://github.com/davezuko/react-redux-starter-kit 并且其中一个视图我可以看到这段代码

// src/views/HomeView/HomeView.scss:5
.counter--green {
  composes: counter;
  color: rgb(25,200,25);
}

// src/views/HomeView/HomeView.js:45
<span className={classes['counter--green']}>{this.props.counter}</span>

我想知道有什么作用？

Answer 1

它是 CSS modules syntax 用于包含来自另一个规则的样式。

在这种情况下，它将 counter 规则中的样式添加到 counter--green 规则。

对于常规 CSS，我们必须以这种方式编写 BEM 风格的 classes。

.counter {
  border-color: red;
  color: red;
  border-bottom: solid 1px;
}

.counter--green {
  border-color: green;
  color: green;
}

然后将它们一起应用于元素。

<div class="counter counter--green"></div>

通过将块样式组合到修饰符样式中，我们可以删除多余的class名称。

.counter--green {
  composes: counter;
  border-color: green;
  color: green;
}

那么我们只需要修饰符class.

<div class="counter--green"></div>

与普通的预处理器混合模型不同，样式在编译的 CSS 中不会重复。相反，counter--green 的输出 class 将是 class 名称的组合，渲染版本实际上与编写 counter counter--green.

具有相同的效果

样式上的“组合”是什么

What does `composes` on styles

reactjs

redux