Less 带参混合

原创
08/26 09:58
阅读数 29

上一节我们学习了 Less 中的混合,混合使用起来也很简单方便。本节我们来学习带参混合,混合可以带一个或多个参数,多个参数之间通过逗号或分号分隔。一般我们使用分号分隔参数,因为在 Less 中逗号有两种意思,可以表示 Mixins 参数分隔符或 CSS 列表分隔符。

带参Mixins

在声明 Mixins 时,参数需要加一个 @ 前缀。

示例:

例如声明了一个混合 .xkd ,这个混合带一个 @num 参数:

.xkd(@num){
  border-radius: @num;
  border-top: @num;
}

.good{
  .xkd(10px);
}

编译成 CSS 代码:

.good {
  border-radius: 10px;
  border-top: 10px;
}

上述代码中 border-radiusborder-top属性的值是未知的,由传入的 @num 参数决定。所以在引用这个混合时,需要给参数赋值,否则在编译代码时会报错。

默认参数

我们可以给 Mixins 中所带的参数设置默认值,这样如果引入 Mixins 时未传入参数,将使用默认参数的值。

示例:

例如下面这段代码:

.xkd(@num:5px; @fontsize:14px){
  border-radius: @num;
  font-size: @fontsize;
}
.one{
  .xkd();
}
.two{
  .xkd(10px, 28px); 
}

编译成 CSS 代码:

.one {
  border-radius: 5px;
  font-size: 14px;
}
.two {
  border-radius: 10px;
  font-size: 28px;
}

可以看到上述代码中,.one 中引入 .xkd 时没有给指定参数赋值,输出时使用的是默认参数的值。

.two 中引入 .xkd 时给参数赋值了,最后使用的是引入时所赋的参数值。

参数顺序

Mixins 中的参数可以不按照特定的顺序定义,而是使用其参数名称进行定义。

示例:
.mixin(@color: red; @fontSize: 14px) {
  color: @color;
  font-size: @fontSize;
}
.one{
  .mixin(@color: #ccc, @fontSize: 18px);
}
.two{
  .mixin(@fontSize: 22px,#eee; );
}

编译成 CSS 代码:

.one {
  color: #ccc;
  font-size: 18px;
}
.two {
  color: red;
  font-size: 22px, #eee;
}

@arguments 变量

如果使用带参混合时,不想使用单个参数,可以使用 @arguments@arguments 变量可以包括所有传递的参数。

示例:
.xkd(@a:10; @b:20px; @c:10px; @d:20px) {
  padding:@arguments;
}

.one{
  .xkd();
}
.two{
  .xkd(20px, 40px, 20px, 40px);
}

编译成 CSS 代码:

.one {
  padding: 10 20px 10px 20px;
}
.two {
  padding: 20px 40px 20px 40px;
}

剩余参数

Mixins 中可以使用可变数量的参数,... 可以表示其余的参数。

示例:
.xkd(@rest...) {
  border: @rest;
}

.good{
  .xkd(1px; solid; #000);
}

编译成 CSS 代码:

.good {
  border: 1px solid #000;
}

总结

本节我们学习了带参 Mixins,包括默认参数、@arguments 、剩余参数等,这和 JavaScript 中函数的参数很类似,熟练掌握这几种参数的使用方法,可以更加灵活的运用 Mixins。

查看更多内容:https://www.9xkd.com/

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部