css - 我可以将我的 CSS 中的 Twitter Bootstrap 脚手架跨度称为 mixin 而不是类吗？

Question

我知道我可以将 class="span3" 添加到 div，但是如果我想通过 LESS 将等效属性赋予另一个类怎么办？

例子:

<div class="span3">This width is span3</div>
<div class="anotherClass">I want to make this also span3, but without explicitly calling it out</div>

在 LESS 中我想做这样的事情:

.anotherClass {
    .span3();
}

我该怎么做？

Answer 1

documentation表示您可以通过不带括号的引用来包含任何类或 ID 规则集:

.anotherClass {
    .span3;
}

然而，对于您的特定情况，您不能包含已编译的 Bootstrap CSS 并能够像这样混合在类中，并且 Bootstrap LESS 源代码不会完全定义类/混合称为 .span1, .span2 等

在mixins.less有一个名为 .span(@columns) 的 mixin 用于计算宽度，具体取决于 @gridColumnWidth 和 @gridGutterWidth 以及参数。您可以使用以下方式调用它:

.anotherClass {
    #grid > .core > .span(3);
}

这只会为您的目标提供为 .span3 计算的宽度。

如果这就是您想要的，那很好，但是还有其他规则适用于名为 .span3 的元素，例如[类*="跨度"]。因此，如果您也尝试镜像这些文件，您将无法以编程方式执行此操作，您必须手动梳理文件并复制所需的属性。