前端学习笔记89-混合函数

混合函数

调用混合函数。
感觉就是函数传参，我就不解释了。

位置传递（依顺序传递传输）

less代码：

.test(@w,@b){
    width: @w;
    height: @b;
    border: 1px solid red;
}
div{
    .test(50px,100px);
}

css对应代码：

div {
  width: 50px;
  height: 100px;
  border: 1px solid red;
}

映射传递

less代码：

.test(@w,@b){
    width: @w;
    height: @b;
    border: 1px solid red;
}
div{
    .test(@w:50px,@b:100px);
}

css对应代码：

div {
  width: 50px;
  height: 100px;
  border: 1px solid red;
}

默认值与缺省

如果我给变量b设置默认值，那么我用的时候如果不给b传值，则使用默认值。
less代码：

.test(@w,@b:30px){
    width: @w;
    height: @b;
    border: 1px solid red;
}
div{
    .test(@w:50px);
}

css对应代码：

div {
  width: 50px;
  height: 30px;
  border: 1px solid red;
}

less的function

查zeal可以看到less有很多以及使做好的function，可以直接拿来用。

拿average来试试

less代码：

.p1{
    width: 200px;
    height: 200px;
    color:average(#222222,#000000);
}

css对应代码：

.p1 {
  width: 200px;
  height: 200px;
  color: #111111;
}

还有一个darken也不错，它的用途比如我们想改变颜色深浅，那么使用它则不需要手动计算深多少。

less代码：

html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    background-color: #bfa;
}
body:hover{
    background-color: darken(#bfa,20%);
}

css对应代码：

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background-color: #bfa;
}
body:hover {
  background-color: #69ff44;
}