html - 在 HTML 中使用变量作为类

Question

我的 SASS 文件中有几个变量，我想在我的 HTML 中直接使用它们作为类或样式。 我知道我可以使用映射功能，但它非常乏味。 还有其他方法可以实现吗？简单的方法？

例如:

sass文件:

$margin-base-vertical:30px 0;

html文件:

<div class="some-container margin-base-vertical">
 some things
</div>

Answer 1

这不是一个好主意。如果你使用描述样式的类，你最终会得到一个真正难以维护的代码。每次您想要更改样式时，都必须更改标记 (HTML) 和 CSS。

最佳做法是使用语义标记。

这就是 sass 真正强大的地方，你可以像这样使用你的变量:

.some-container {
    margin: $margin-base-vertical;
}

编辑:

对于你的问题，我能想到的唯一选择是声明一个变量，然后在你的类上使用它，之后，你将拥有标记所需的类。

SASS 文件

$margin-base-vertical: 30px 0;
.margin-base-vertical { margin: $margin-base-vertical; }

HTML

<div class="some-container margin-base-vertical">
 some things
</div>