Sass @extend vs将类添加到组件中

Question

我有一个通过create-react-app生成的项目，其中包含sass-compilation（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-code中的标记类。如果我想更改css-framework，我将需要编辑.sass文件。

所以我的问题是“这是一个好主意吗？”。如果是我如何处理这个？由于sass将每个文件编译成相应的.css，我将必须在一个大的.css中一起编译它们并从js-files中删除所有import './Mycomp.css'我猜

Answer 1

@extend的两个主要好处是：

1. 使用CSS / sass中的继承功能
2. 保持HTML标记清洁并仅在样式文件中编写所有混乱的样式内容

参考：本文https://www.sitepoint.com/the-benefits-of-inheritance-via-extend-in-sass/