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

Question

所以我目前正在按照 BEM 标准进行一些样式设计。

我正在做的一个例子可能是这样的:

.block{ 
  &__element {
  }
}

我想做的是:

// file a 
.block {
 ...
}

-

// file b
// add magic to reference the `block`class in file a  
&__elelemnt {
 ...
}

我现在在做什么:

// file a 
.block {
 ...
}

-

// file b
.block__elelemnt {
 ...
}

(手动将block部分添加到名称中)

有什么方法可以更智能地引用它吗？

提前致谢

Answer 1

你可以有这样的文件结构:

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

并导入元素文件信息 block 文件。

block .scss:

.block {
    color: red;

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

element-1.scss:

&__element-1 {
    color: green;
}

编译为:

.block {
    color: red;

    &__element-1 {
        color: green;
    }
}