CSS LESS 多参数混入

最新推荐文章于 2024-09-11 21:12:35 发布

奋进中的巨人

最新推荐文章于 2024-09-11 21:12:35 发布

阅读量901

点赞数

文章标签： less css 多参数混入

本文链接：https://blog.csdn.net/TJHAIXIN/article/details/41928303

版权

/* LESS Document */
.block(@width,@height,@background-color:transparent,@radius:0,@offset-x:0,@offset-y:0,@blur-radius:0,@color:none,@background-image:none){
    width: @width;
    height: @height;
    background-color: @background-color;
    border-radius: @radius;
    box-shadow: @offset-x 
                @offset-y
                @blur-radius
                @color;
    background-image: @background-image;
}
.div(@linear-gradient;@width:300px;@height:100px){
    background-image: linear-gradient(@linear-gradient);
    width: @width;
    height: @height;
}
.div(@linear-gradient){
    background-image: linear-gradient(@linear-gradient);
    width: 900px;
    height: 600px;
}
.test1{
   // .block(300px,100px,orange,5px,0,5px,5px,#999,linear-gradient(to top,white,gray));
   .div(to bottom,white,yellow;);
}

多餐混入比较实用，LESS Complier根据不同的选择符构造型进行类似CSS的覆盖，比如上面的单一linear-gradient，就会覆盖多参数。