用Less覆盖类定义 [英] Overriding class definitions with Less
问题描述
我正在尝试自定义基于Bootstrap的Joomla模板.具体来说，我正在尝试使硬编码" .span4具有.span3的宽度.当然，更改标记会容易得多，但是我认为这就是CSS的目的，尽管我们大多数人都使用Bootstrap定义布局和视觉外观.此外，学习的乐趣在哪里?
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?
为此，这是我在模板随附的my_css.less中尝试的操作:
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?
谢谢！
*编辑*
这是我在页面中使用的模板:
This is the template I'm using in my page:
我要自定义的位是徽标右侧的位，其中一位包含语言选择器和社交图标.
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.
我的客户的徽标比模板示例中的徽标宽，因此将#top1推到右侧，并将下面的元素(包含图库"，我的帐户"和搜索框的元素)推到下方.
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.
回答@Harry关于选择器不匹配的问题，我的问题是".row-fluid#top1.span4"，因为我只希望将修改应用于#top1中包含的.span4.我在下面粘贴的另一段代码是应用的，而不是我想要的.另外，我希望我的自定义设置优先于默认的CSS，因此我的选择器将变得更加具体.似乎没有错，因为元素的背景变为红色.
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.
@哈利:
还，您是否使用任何mixin来生成宽度?
Also, are you using any mixins to generate the width?
我在Less上没有经验，我无法在引导文档中找到mixin，但是根据
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:
在mixins.less中，有一个名为.span(@columns)的mixin用于计算宽度，具体取决于@gridColumnWidth和@gridGutterWidth以及参数.
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).
再次感谢您！
*编辑03/09/2014 *
好吧，我想我越来越近了.新代码:
Ok, I think I'm gettin closer. New code:
.row-fluid #top1.span4 {
#grid > .fluid > .span(3);
background:red;
}
.row-fluid #top1.span4 {
#grid > .fluid > .span(3);
background:red;
}
产生的CSS:
.row-fluid #top1.span4 {
width: * 3 * 2;
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?)
推荐答案
#grid > .fluid > .span(3);
给我:
.row-fluid #top1.span4 {
width: 23.40425532%;
*width: 23.35106383%;
background: red;
}
而不是width: * 3 * 2;
使用less.php，v1.4和v1.7.3进行了测试.请注意， Less v2根本不会编译BS2
Tested with less.php, less v1.4, v1.7.3. Notice that Less v2 do not compile BS2 at all.
在navbar.less中的#grid > .core > .span(@gridColumns);上，小于v2失败
Less v2 fails on #grid > .core > .span(@gridColumns); in navbar.less
这篇关于用Less覆盖类定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
