我有以下少量代码:
div.Tooltip {
cursor: default;
&.Info {background-color: #808080;} // Info
&.Menu {background-color: #606060;} // Menu
&.N:before {
border-top: 6px solid @Color;
bottom: -6px;
} // N:BEFORE
}
基本上,我想在N中使用@Color:之前与Info或Menu中的背景颜色相同,具体取决于Tooltip具有哪个类:“Tooltip Info”或“Tooltip Menu”。
我尝试使用变量,但我总是以相同的值结束。
我想用LESS做什么呢?
答案 0 :(得分:1)
我不是百分百确定你是如何准确地应用before
的......或者你想要的CSS应该是什么。
要将特定于父规则的格式应用于子(或伪元素),您可以创建一个可重复使用的参数 mixin ,它将颜色作为参数,设置背景并添加具有适当颜色(和其他属性)的子规则(伪元素)。
也许是这样的:
.before(@color){
background-color: @color;
&:before {
border-top: 6px solid @color;
bottom: -6px;
}
}
然后你可以为每个班级调用mixin:
div.Tooltip {
cursor: default;
&.Info {
.before(#808080);
} // Info
&.Menu {
.before(#606060);
} // Menu
}
,CSS输出将是:
div.Tooltip {
cursor: default;
}
div.Tooltip.Info {
background-color: #808080;
}
div.Tooltip.Info:before {
border-top: 6px solid #808080;
bottom: -6px;
}
div.Tooltip.Menu {
background-color: #606060;
}
div.Tooltip.Menu:before {
border-top: 6px solid #606060;
bottom: -6px;
}
现在,这将把不同的颜色伪元素应用于分配给Tooltip
的不同类。
注意:强>
如上所述,这应该有用(如果你将content
,width
,height
和position
添加到伪元素中,但如果我是你,我会修改你的CSS。例如,调用div.Tooltip.Info
真的有效吗?你能以聪明的方式结合一些选择器吗?但我想我不会看到整体情况。
在这里,我添加了一个带有生成的CSS的jsfiddle演示(我刚添加了一些不同的颜色,因为边框不会在同一颜色的背景上显示,并为共享的:before
分配了一些必需的属性选择器,以便显示):
...
无论如何,像我建议的那样,mixin将是一种优雅的方式,可以在多个地方添加相同的元素并进行特定的更改。
答案 1 :(得分:1)
...然后这将有效(as the fiddle shows):
<强> LESS 强>
div.Tooltip {
cursor: default;
&.Info {
background-color: #808080;
border-top-color: #808080;
} // Info
&.Menu {
background-color: #606060;
border-top-color: #606060;
} // Menu
&.N:before {
border-top: 6px solid transparent;
//Firefox 22 bug did not allow inherit with border-top so I'm overriding
border-top-color: inherit;
bottom: -6px;
} // N:BEFORE
}
CSS输出
div.Tooltip {
cursor: default;
}
div.Tooltip.Info {
background-color: #808080;
border-top-color: #808080;
}
div.Tooltip.Menu {
background-color: #606060;
border-top-color: #606060;
}
div.Tooltip.N:before {
border-top: 6px solid transparent;
border-top-color: inherit; /* for Firefox 22 bug */
bottom: -6px;
}
**如果你要定义很多“类型”的工具提示,那就制作一个mixin并使用它:
.buildTooltip(@type, @color) {
&.@{type} {
background-color: @color;
border-top-color: @color;
}
}
div.Tooltip {
cursor: default;
.buildTooltip(Info, #808080);
.buildTooltip(Menu, #606060);
.buildTooltip(Blahhhh, #ffffff);
.buildTooltip(Mooooore, #ff0000);
&.N:before {
border-top: 6px solid transparent;
//Firefox bug did not allow inherit with border-top
border-top-color: inherit;
bottom: -6px;
} // N:BEFORE
}
CSS输出(仅显示添加的“类型”,否则与上面相同)
div.Tooltip.Blahhhh {
background-color: #ffffff;
border-top-color: #ffffff;
}
div.Tooltip.Mooooore {
background-color: #ff0000;
border-top-color: #ff0000;
}