3

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?

kleinfreund
  • 6,546
  • 4
  • 30
  • 60
Ryan
  • 14,682
  • 32
  • 106
  • 179
  • What about "extend"? Have you even googled for this functionality? – kleinfreund Feb 07 '13 at 21:30
  • Could you clarify your question? You mention LESS, but your tags include Sass. Which preprocessor are you actually using? – cimmanon Feb 07 '13 at 21:36
  • @cimmanon, LESS, but I tagged SASS in the event that the answers are similar. – Ryan Feb 14 '13 at 21:05
  • @kleinfreund, Yes, but I still don't have an answer. If it's just a matter of a google search, can you share the correct search terms? – Ryan Feb 14 '13 at 21:06

2 Answers2

3

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.

freejosh
  • 11,263
  • 4
  • 33
  • 47
  • This results in a `NameError: .span3 is undefined in /path/file.less:1000:3`. Can you recommend an alternative? – Ryan Feb 14 '13 at 21:04
  • The class you're mixing in has to be accessible from the current file to be able to use it. Find the file where `.span3` is defined and `include` it. – freejosh Feb 14 '13 at 21:11
  • Thanks @freejosh, I'm digging in now. I do include mixins.less at the beginning of my file.less, like so: `@import "mixins.less";` and I include other variables from my variables.less just fine (colors, for example: `@blue`). – Ryan Feb 14 '13 at 22:05
  • Your `#grid > .core > .span(3)` didn't error out on me, so that's progress, but it doesn't hold all the same styles as the explicit `class="span3"` and ends up stacking instead of aligning horizontally. But I think I'm on the right track now at least. Thanks for your help. – Ryan Feb 14 '13 at 22:09
2
.anotherClass {
    .span(3);
}

Will do the job. Since bootstrap is defining a generic class spanX for creating spans.

topless
  • 8,069
  • 11
  • 57
  • 86