从另一个文件中的 class 名称扩展 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

这可能是您能做的最好的了。

$namespace: "block";

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

输出

.block-myClass {
    ...
}

您可以将变量 $namespace 保留在文件顶部或其他文件中，然后 import 它。使用变量的好处是你可以更新一次，你所有的引用都会被更新。

Answer 2

SASS 就是干货。

就像，如果你想修改任何东西，你应该能够从一个地方修改它。如果您需要跨多个文件可用的任何内容，请考虑在 _vars 文件中定义其值并将其包含在您需要的任何位置。另请注意，这与代码短小无关，但与代码的可维护性和灵活性有关。
事实上，即使您确实需要编写更多代码（实际上不会发生这种情况），DRY 的优势也远远超过它。
应该怎么做：

/* _vars.scss: */
$block:block;

/* a.scss: */
@import _vars;
.#{$block} {
  ...
}

/* b.scss: */
@import _vars;
.#{$block}__element {
  ...
}

现在，无论何时您需要更改 block 值，您都可以从一个地方进行：_vars.scss。

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

.block {
  ...
  &__element {
    ...
  }
}

可能 .block 和 .block__element 是相关的，总的来说，将它们放在同一个文件中更有意义。随着您的应用程序变得越来越复杂，如果您将代码过度复杂化，您会发现很难跟踪代码。

Answer 3

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

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

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

block.scss:

.block {
    color: red;

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

元素-1.scss:

&__element-1 {
    color: green;
}

编译为：

.block {
    color: red;

    &__element-1 {
        color: green;
    }
}

从另一个文件中的 class 名称扩展 sass

extend from class name in another file sass

css

sass

styling

bem