Css 使用更少,是否可以扩展参数化混合?
我是LESS的新手,我只是在试用它,使用1.5版。我发现了有用的Css 使用更少,是否可以扩展参数化混合?,css,less,extend,mixins,Css,Less,Extend,Mixins,我是LESS的新手,我只是在试用它,使用1.5版。我发现了有用的extend命令,但我想知道这是否可以应用于参数混合以及静态混合。显然,根据我的实验,这似乎是不可能的: 这很有效 .some-mixin { } .child { &:extend(.some-mixin); } 这不起作用,并引发“意外令牌”错误: 这是当前的限制小于,还是我使用不正确?提前感谢您的回答 编辑-根据请求添加预期输出 当有更多的孩子扩展参数混合时,我所期望的更有意义: .child1, .chil
extend
命令,但我想知道这是否可以应用于参数混合以及静态混合。显然,根据我的实验,这似乎是不可能的:
这很有效
.some-mixin {
}
.child {
&:extend(.some-mixin);
}
这不起作用,并引发“意外令牌”错误:
这是当前的限制小于,还是我使用不正确?提前感谢您的回答
编辑-根据请求添加预期输出
当有更多的孩子扩展参数混合时,我所期望的更有意义:
.child1,
.child2,
.child3 {
color: red;
background-color: blue;
}
.child1 {
border: 1px solid blue;
}
.child2 {
border: 1px solid green;
}
.child3 {
border: 1px solid red;
}
不支持,目前不支持。但是它计划在未来的版本中实现。我不确定您想要实现什么(也就是说,我不确定如果扩展参数混合,您期望
:extend()
代码实际做什么)。如果您希望定义.child
的颜色,则将其用作直接混音器:
更少
.some-mixin(@color, @bgcolor) {
color: @color;
background-color: @bgcolor;
}
.child {
.some-mixin(red, blue);
}
.test {
.child; /* or using .child(); */
}
CSS输出
.child{
颜色:#ff0000;
背景色:#0000ff;
}
这也使得.child
本身成为了红色
和蓝色
颜色组合的混合体,我认为如果扩展成功的话,这将是扩展工作的净结果。也就是说,我希望您的第二组代码会产生类似的结果(理论上,这实际上不起作用,实际上也不是用更少的时间生产的):
但这两个几乎等同于mixin(其中一个添加了参数):
/*扩展工作时的理论混合*/
.child(@color:red,@bgcolor:blue){
颜色:@颜色;
背景色:@bgcolor;
}
/*源代码直接使用.some mixin in.child*/
.孩子{
颜色:#ff0000;
背景色:#0000ff;
}
这样,上述任意一种方法都可以将子值混合到新的选择器中:
更少
.some-mixin(@color, @bgcolor) {
color: @color;
background-color: @bgcolor;
}
.child {
.some-mixin(red, blue);
}
.test {
.child; /* or using .child(); */
}
CSS输出
.test{
颜色:#ff0000;
背景色:#0000ff;
}
感谢您的贡献。为了澄清,我希望.child
扩展“具体”mixin是参数调用的评估结果。@Diego:我不确定您的解释是否进一步阐明了您的期望。您希望最终的LESS或CSS输出结果是什么?感谢您的澄清,至少我知道我没有把事情搞砸。