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就是DRY。

如果你想要修改任何东西，你应该可以从一个地方修改它。如果您需要跨多个文件提供任何可用内容，请考虑在_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;
    }
}

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

3 个答案: