Can I call Twitter Bootstrap scaffolding spans inside my CSS as a mixin instead of a class?

问题

I understand I can add a class="span3" to a div, but what if I want to give the equivalent attributes to another class via LESS?

Example:

<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>

In LESS I want to do something like:

.anotherClass {
    .span3();
}

How can I do this?

回答1:

The documentation says you can include any class or id ruleset by referencing it without brackets:

.anotherClass {
    .span3;
}

For your particular case, however, you can't include the compiled Bootstrap CSS and be able to mix in the class like that, and the Bootstrap LESS source doesn't outright define classes/mixins called .span1, .span2 etc.

In mixins.less there's a mixin called .span(@columns) that's used to calculate the width, depending on @gridColumnWidth and @gridGutterWidth along with the argument. You could call it using:

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

which would only give your target the width that would be calculated for a .span3.

If that's what you're going for then that's fine, however there are also other rules that would apply to an element named .span3, e.g. [class*="span"]. So if you're trying to mirror those as well you won't be able to do it programmatically, you'd have to comb through the files manually and copy the attributes you want.