Sass @extend vs 将类添加到组件

Question

我有一个通过create-react-appsass编译(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框架，我将需要编辑.sass文件。

所以我的问题是"这是一个好主意吗？如果是我该如何处理？由于 sass 将每个文件编译为相应的.css我将不得不将它们编译成一个大.css并从 js 文件中删除所有import './Mycomp.css'我猜

Answer 1

@extend的两个主要好处是：

1. 在 CSS/sass 中使用类似继承的功能
2. 保持HTML标记干净，只在样式文件中编写所有混乱的样式内容

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