当使用LESS时,我发现混合类很有用,以便根据其他类属性创建一个新类,但有时我需要覆盖它们。
像:
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
.btn;
background-color: yellow;
font-size: 12px;
}
输出具有重复的属性:
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
.btn;
background-color: yellow;
font-size: 12px;
}
我知道有多种方法,比如dom上的多个类,甚至@extend构建多个选择器,但导航器仍在运行时覆盖属性。
有什么理由在mixin时复制相同的属性吗?似乎是一种制作“独立”属性组的简单方法,但如果有重复的值则不太好。
答案 0 :(得分:6)
LESS不考虑删除块中的重复属性,至少部分是因为这个原因stated here (引用稍微修改语法修复):
问题是人们经常按顺序使用多个属性 为旧版浏览器提供后备。删除属性是 一般来说,这不是一件好事。
程序员不需要对其进行编程以进行复制。你可以像Danny Kijkov在他的回答中所说的那样设置一个基本的混音,或者......
你可以精心构建一个主按钮制造商mixin。像这样:
LESS(Mixin)
.makeBtn(@ext: null; @rad: 10px; @color: blue; @size: 10px;) {
.set-extension() when (@ext = null) {
@class-extension: ~'';
}
.set-extension() when not (@ext = null) {
@class-extension: ~'_@{ext}';
}
.set-extension();
.btn@{class-extension} {
border-radius: @rad;
background-color: @color;
font-size: @size;
//define various addtions based on extensions here
.specialExtensionProps() when (@ext = danger) {
border: 3px solid red;
}
.specialExtensionProps() when (@ext = someExtName) {
my-special-prop: yep;
}
.specialExtensionProps();
}
}
LESS(使用Mixin各种方式)
.makeBtn(); //makes base button
.makeBtn(warning; @color: yellow; @size: 12px); //makes modified button
.makeBtn(danger; @color: red;); //makes modified button
.makeBtn(someExtName, 15px); //makes modified button
CSS输出
.btn {
border-radius: 10px;
background-color: #0000ff;
font-size: 10px;
}
.btn_warning {
border-radius: 10px;
background-color: #ffff00;
font-size: 12px;
}
.btn_danger {
border-radius: 10px;
background-color: #ff0000;
font-size: 10px;
border: 3px solid red;
}
.btn_someExtName {
border-radius: 15px;
background-color: #0000ff;
font-size: 10px;
my-special-prop: yep;
}
如果您不知道,请注意上面演示了仅设置mixin变量集中的一些变量的LESS功能。因此,对于前两个专门的.makeBtn()
调用,我只是通过显式调用变量名来设置(例如@color: yellow
),从mixin中按顺序设置一些变量。这允许我“跳过”设置@size
。在最后一个例子中,我只设置了前两个值,所以我不需要输入任何变量名。
我不知道上述内容是否可以帮助您获得所需内容,但它确实提供了一种能够减少代码大小的不同方式。
您提到了:extend()
,这可以很好地用于避免重复:
<强> LESS 强>
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
&:extend(.btn);
background-color: yellow;
font-size: 12px;
}
CSS输出
.btn,
.btn_warning {
border-radius: 10px;
background-color: blue;
font-size: 10px;
}
.btn_warning {
background-color: yellow;
font-size: 12px;
}
在您的情况下,如果所有按钮都是类.btn
或.btn_SOMETHING
形式,并且您没有使用.btn_
除了按钮之外的任何其他按钮,那么您可能是能够只使用CSS级联来应用样式并防止像这样重复CSS代码(不需要特殊的LESS):
LESS和CSS输出
.btn, [class *= btn_] {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
background-color: yellow;
font-size: 12px;
}
任何具有类btn_warning
的html将首先从属性选择器[class *= btn_]
获取基本按钮样式,而实际的btn_warning
类将覆盖设置为被覆盖的内容。
如果你在html中拆分类名(所以class="btn warning"
而不是class="btn_warning"
),那么这可以避免重复:
LESS和CSS输出
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn.warning {
background-color: yellow;
font-size: 12px;
}
答案 1 :(得分:3)
这个解决方案怎么样?
.btn(@size: 10px, @color:blue) {
border-radius: 10px;
background-color: @color;
font-size:@size;
}
.btn_warning {
.btn(12px, yellow);
}