小编Tua*_*ful的帖子

较少CSS:具有可变参数数量的混合

LESS允许参数化混合,例如:

.transition(@property, @duration){
    transition:         @property @duration;
    -moz-transition:    @property @duration; /* Firefox 4 */
    -webkit-transition: @property @duration; /* Safari and Chrome */
    -o-transition:      @property @duration; /* Opera */
}
Run Code Online (Sandbox Code Playgroud)

但是,这并不总是适用于过渡等属性.如果您尝试多次转换并尝试多次调用mixin,则最后一次mixin将覆盖所有先前定义的转换.那是因为用于定义多个转换的正确CSS3语法是:

... {
    transition: @property1 @duration1, @property2 @duration2, ...;
}
Run Code Online (Sandbox Code Playgroud)

我可以想到将多个转换定义为mixin的唯一方法是重载mixin:

.transition(@property, @duration){...}
.transition(@property, @duration, @prop2, @dur2){...}
.transition(@property, @duration, @prop2, @dur2, @prop3, @dur3){...}
Run Code Online (Sandbox Code Playgroud)

是否有更健壮和简洁的方法来定义转换mixin以获取可变数量的参数并构造适当的转换CSS?

上下文:有时我想转换多个属性; 例如,a :hover可能触发背景颜色,框阴影,文本颜色等的转换...

css css3 less css-transitions less-mixins

26
推荐指数
4
解决办法
2万
查看次数

标签 统计

css ×1

css-transitions ×1

css3 ×1

less ×1

less-mixins ×1