less模块——混合（像函数一样可以调用）

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

原创最新推荐文章于 2024-09-11 21:11:50 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#混合 #less

less模块专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在LESS中使用混合(mixin)特性来实现带有参数的样式调用，类似于函数的功能，以此来简化CSS代码并提高复用性。通过具体实例展示了如何定义混合以及如何在不同元素上调用带有不同参数的混合。

混合

混合可以实现带参数的调用，像函数一样

.text(@radius:5px){           //less
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
#header{
    .text;
}
#footer{
    .text(10px);
}

#header {              //css样式
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}