Sass @extend 与添加 class 到组件

Question

我有一个通过 create-react-app 使用 sass 编译 (doc) 和 foundation-sites 框架生成的项目。

假设我有一个呈现如下内容的组件：

<div class='mycomp grid-x'>
  <div class='mycomp__element cell small-6'>1</div>
  <div class='mycomp__element cell small-6'>2</div>
</div>

我想如果我像这样将标记基础类移动到 sass 可能会更干净：

.mycomp
  @extend .grid-x
  &__element
    @extend .cell
    @extend .small-6

它不是很漂亮，但至少我不必考虑 js 代码中的标记类。如果我主要想更改 css-framework，我将需要编辑 .sass 文件。

所以我的问题是 "Is it a good thought?"。如果是这样，我该如何处理？由于 sass 将每个文件编译成相应的 .css 我将不得不将它们全部编译成一个大的 .css 并从我猜的 js 文件中删除所有 import './Mycomp.css'

Answer 1

@extend 的两个主要好处是：

Sass @extend vs adding class to component