129_less-混合函数

最新推荐文章于 2022-12-26 17:58:31 发布

「已注销」

最新推荐文章于 2022-12-26 17:58:31 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML CSS 基础文章标签： less css

本文链接：https://blog.youkuaiyun.com/gty204625782/article/details/119962807

这篇博客详细探讨了LESS预处理器中的两种重要概念——混合（mixins）和匹配模式（pattern matching）。作者首先展示了LESS源码中的混合函数用法，接着解释了如何使用混合来复用CSS代码。然后，文章转向匹配模式，通过LESS源码实例阐述了这一高级特性及其在编译成CSS后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

混合

（一）LESS源码

//混合函数，在混合函数中可以直接设置变量，也可以给变量一个默认值
.test(@w: 100px, @h: 200px, @bg-color: red) {
   
   
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}

div {
   
   
    //调用混合函数，按顺序传递参数
    // .test(200px,300px,#bfa);

    //如果不给参数，则会使用test中的默认参数，但是这里给了一个参数，则默认给到@w
    .test(300px);

    //还可以指定赋值，这时候就不需要注意顺序问题了
    // .test(@bg-color:red, <