Css 从另一个文件sass中的类名扩展

所以我现在正在做一些造型，遵循BEM标准

我正在做的一个例子是：

.block{ 
  &__element {
  }
}

我想做的是：

// file a 
.block {
 ...
}

// file a 
.block {
 ...
}

-

我目前正在做的事情：

-

手动将块零件添加到名称中

有没有更聪明的方法来引用这个

---

提前谢谢

这也许是你能做的最好的了

$namespace: "block";

.#{$namespace}-myClass {
    ...
}

输出

.block-myClass {
    ...
}

---

您可以将变量$namespace保留在文件顶部或其他文件中，然后将其导入。使用变量的优点是您可以更新它一次，并且所有引用都将被更新。

SASS的全部内容都是关于DRY的

如中所示，如果您想要修改任何内容，您应该能够从一个位置对其进行修改。如果您需要在多个文件中可用的任何东西，请考虑在一个VARVS文件中定义它的值，并将它包括在您需要的任何地方。还要注意，这与代码的短小无关，而是与代码的可维护性和灵活性有关。 事实上，即使您确实可以编写更多的代码，但实际上，这并没有发生，DRY的优势远远超过了它。 以下是应该如何做到这一点：

/*_vars.scss：*/ $block:block； /*a.scss：*/ @进口变量； .{$block}{ ... } /*b.scss：*/ @进口变量； .{$block}\u元素{ ... } 现在，无论何时需要更改块值，都可以从一个位置执行：_vars.scss

但是，在实践中，大多数人使用初始嵌套技术：

.街区{ ... &__元素{ ... } }

---

可能.block和.block\u元素是相关的，总的来说，将它们放在同一个文件中更有意义。当你的应用程序变得越来越复杂时，如果你把它复杂化了，你会发现很难跟踪你的代码。

你可以使用以下文件结构：

block-1/
--block-1.scss
--element-1.scss
--element-2.scss
block-2/
--block-1.scss
--element-1.scss
--element-2.scss

和导入元素文件信息块文件

block.scss：

要素-1.scss：

汇编至：

.block {
    color: red;

    &__element-1 {
        color: green;
    }
}

block-1/
--block-1.scss
--element-1.scss
--element-2.scss
block-2/
--block-1.scss
--element-1.scss
--element-2.scss

.block {
    color: red;

    @import "element-1.scss";
    @import "element-2.scss";
}

&__element-1 {
    color: green;
}

.block {
    color: red;

    &__element-1 {
        color: green;
    }
}