什么`组合`风格

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模块语法,用于包含来自其他规则的样式.

在这种情况下,它会将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.