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

Question

我知道我可以将 a 添加class="span3"到 a 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();
}

我怎样才能做到这一点？

score 3 · Accepted Answer

该文档说您可以通过引用不带括号的任何类或 id 规则集来包含它：

.anotherClass {
    .span3;
}

但是，对于您的特定情况，您不能include编译 Bootstrap CSS 并能够像这样混合在类中，并且 Bootstrap LESS 源没有直接定义类/mixins.span1等.span2。

在mixins.less中，有一个名为 mixin .span(@columns)，用于计算宽度，取决于参数@gridColumnWidth并@gridGutterWidth与参数一起计算。您可以使用以下方法调用它：

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

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

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

score 2 · Accepted Answer

.anotherClass {
    .span(3);
}

将完成这项工作。由于引导程序正在定义一个通用类 spanX 来创建跨度。

2 回答 2