Overriding class definitions with Less

问题:

I'm trying to customize a Joomla template, which is based on Bootstrap. Specifically, I'm trying to make a "hardcoded" .span4 have the width of a .span3. Sure, it would be much easier to change the markup, but I think that's what css is for, despite the way most of us use Bootstrap for defining layout and visual appearance. Besides, where would be the fun of learning?

For that, this is what I'm trying in the my_css.less provided with the template:

.row-fluid #top1.span4 {
    .row-fluid .span(3);
    background:red;
}

Actually, the "background" bit is only to make sure that I'm not getting the selector wrong. So, I get that element with a red background, but the rest of the properties aren't applied. This is what I get instead:

.row-fluid .span4 {
width: 31.623931623932%;
}

Am I doing anything wrong? Is what I'm trying even possible?

Thank you!

* Edit *

This is the template I'm using in my page:

Perty by SmartAddons

The bit I'm trying to customize is the one at the right of the logo, the one holding the language selector and the social icons.

My client's logo is wider than the one in the template example, so it pushes #top1 to the right, and it pushes the following element (the one containing "galleries", "my account" and the search box) below.

Answering @Harry's question about selectors not matching, mine is ".row-fluid #top1.span4" because I only want my modification to apply to the .span4 contained in #top1. The other piece of code I pasted below is what is being applied instead of what I intend. Also, I wanted my customization to take preference over the default css, so my selector tries to be more specific. It doesn't seem to be wrong, because the background of the element becomes red.

@Harry:

Also, are you using any mixins to generate the width?

I'm not experienced in Less and I wasn't able to find the mixin in bootstrap documentation, but according to @freejosh at this post:

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.

Actually, that example is the one I'm trying to adapt to my needs.

I hope my edition made things clearer (or at least not more obscure, english is not my native language).

Thank you again!

* Edit 03/09/2014 *

Ok, I think I'm gettin closer. New code:

.row-fluid #top1.span4 { #grid > .fluid > .span(3); background:red; }

Resulting css: .row-fluid #top1.span4 { width: * 3 * 2; background: red; }

Of course, the browser complains of an invalid property value. But at least that is a step (forward?)

回答1:

#grid > .fluid > .span(3);

gives me:

.row-fluid #top1.span4 {
  width: 23.40425532%;
  *width: 23.35106383%;
  background: red;
}

and NOT width: * 3 * 2;

Tested with less.php, less v1.4, v1.7.3. Notice that Less v2 do not compile BS2 at all.

Less v2 fails on #grid > .core > .span(@gridColumns); in navbar.less