less中的可变参数

原创

一个爱听音乐的程序员 2021-08-08 18:06:00 ©著作权

文章标签 Less 4s html css 文章分类 运维

©著作权归作者所有：来自51CTO博客作者一个爱听音乐的程序员的原创作品，请联系作者获取转载授权，否则将追究法律责任

还是通过之前的老套路来引出 less 中混合的可变参数，首先来看如下代码

div {
  width: 200px;
  height: 200px;
  background: red;
  transition: all 4s linear 0s;
}

div:hover {
  width: 400px;
  height: 400px;
  background: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div></div>
</body>
</html>

如上的代码当中没有使用到 less 现在来使用混合改造一下

.animate(@name, @time, @mode, @delay) {
  transition: @name @time @mode @delay;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  .animate(all, 4s, linear, 0s);
}

div:hover {
  width: 400px;
  height: 400px;
  background: blue;
}

当前我们的混合的参数都需要传递，如果都需要全部传递可以使用 @arguments，@arguments 代表着就是你传入的所有参数，less 中的 @arguments 和 js 中的 arguments 一样，可以拿到传递进来的所有形参，这个时候你就不用足一的赋值，如下

.animate(@name, @time, @mode, @delay) {
  transition: @arguments;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  .animate(all, 4s, linear, 0s);
}

div:hover {
  width: 400px;
  height: 400px;
  background: blue;
}

如上通过 arguments 改写完毕之后其实形参的名称就没有任何的意义，可以使用 ... 来代替，那么三个点代表着什么含义呢，代表着可以传递零个或者多个形参参数

less中的可变参数_css

.animate(...) {
  transition: @arguments;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  .animate(all, 4s, linear, 0s);
}

div:hover {
  width: 400px;
  height: 400px;
  background: blue;
}