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风格的类。

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

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

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

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

通过将块样式组成修饰符样式，我们可以删除多余的类名。

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

然后我们需要的是修饰符类。

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

与普通的预处理器mixin模型不同，样式在编译的CSS中不会重复。相反，counter--green的输出类将是两个类名的组合，渲染的版本实际上与写counter counter--green具有相同的效果。

什么`组合`风格

1 个答案: