less（六）混合的使用

最新推荐文章于 2025-01-12 20:50:28 发布

原创最新推荐文章于 2025-01-12 20:50:28 发布 · 855 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less #混合

less 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了LESS预处理器中混合(Mixin)的基本用法，包括如何定义带参数的混合、设置默认参数值以及在实际样式中调用混合的方法。

直接看下面的代码：混合就相当于一个函数，我们可以使用不同的参数来反复使用这个函数；

上面的代码首先定义了一个函数，有两个参数，那么函数内部，我们的border参数的设置就使用了这些参数；

定义完之后，我们在div内部的p标签上使用了这个函数；和使用 js 函数是差不多的；

上面只是定义了参数，参数还可以指定默认值的，我们改变一下：

@width:100;
@height:100;
@pw:0.5;
@ph:0.5;


.border(@b-width:5px,@b-color:orange){
     border:@b-width solid @b-color;
}

div{
    width:unit(@width,px);
    height:unit(@height,px);
    border:1px solid red;
    p{
        width:percentage(@pw);
        height:percentage(@ph);
        .border()
    }
}