less中的混合

小灰灰 2021-10-19 05:44 350阅读 0赞

### **混合就是将一系列属性从一个规则集引入到另一个规则集的方式。** ###

**普通混合（例子中重点看mixture）**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/style2.css"/>
    </head>
    <body>
    <div class="test1">
        <span class="test2">
             XYZ
        </span>
        <span class="test3">LM</span>
    </div>
    </body>
    <script src="../less.min.js" type="text/javascript"></script>
    </html>

//普通混合：mixture会编译到.css文件里面去
    .mixture {
      font-weight: bold;
      font-size: 30px;
      color: blue;
    }
    
    .test1 {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .test2 {
        .mixture
      }
    
      .test3 {
        .mixture
      }
    }

.mixture {
      font-weight: bold;
      font-size: 30px;
      color: blue;
    }
    .test1 {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .test1 .test2 {
      font-weight: bold;
      font-size: 30px;
      color: blue;
    }
    .test1 .test3 {
      font-weight: bold;
      font-size: 30px;
      color: blue;
    }

--------------------

**不带输出的混合，加上()就可以了**

//不带参数的混合,加上()就可以了
    .mixture() {
      font-weight: bold;
      font-size: 30px;
      color: blue;
    }
    
    .test1 {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .test2 {
        .mixture
      }
    
      .test3 {
        .mixture
      }
    }

.test1 {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .test1 .test2 {
      font-weight: bold;
      font-size: 30px;
      color: blue;
    }
    .test1 .test3 {
      font-weight: bold;
      font-size: 30px;
      color: blue;
    }

--------------------

**带参数的混合**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/style3.css"/>
    </head>
    <body>
    <div class="test1">
        <span class="test2">
             XYZ
        </span>
        <span class="test3">LM</span>
    </div>
    </body>
    <script src="../less.min.js" type="text/javascript"></script>
    </html>

//带参数的混合
    .mixture(@c) {
      font-weight: bold;
      font-size: 30px;
      color: @c;
    }
    
    .test1 {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .test2 {
        .mixture(red)
      }
    
      .test3 {
        .mixture(blue)
      }
    }

--------------------

**带参数并且有默认值的混合**

//带参数并且有默认值的混合
    .mixture(@c:red,@w:100px,@h:100px) {
      font-weight: bold;
      font-size: 10px;
      display: inline-block;
      text-align:center;
      line-height:@h;
      border: 1px solid @c;
      width: @w;
      height: @h;
      color: @c;
    }
    
    .test1 {
      width: 400px;
      height: 400px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .test2 {
        .mixture(red)
      }
    
      .test3 {
        .mixture(blue)
      }
    }

.test1 {
      width: 400px;
      height: 400px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .test1 .test2 {
      font-weight: bold;
      font-size: 10px;
      display: inline-block;
      text-align: center;
      line-height: 100px;
      border: 1px solid #ff0000;
      width: 100px;
      height: 100px;
      color: #ff0000;
    }
    .test1 .test3 {
      font-weight: bold;
      font-size: 10px;
      display: inline-block;
      text-align: center;
      line-height: 100px;
      border: 1px solid #0000ff;
      width: 100px;
      height: 100px;
      color: #0000ff;
    }

--------------------

**命名参数：当形参和实参不不匹配的时候，就需要用到命名参数了。**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/style4.css"/>
    </head>
    <body>
    <div class="test1">
        <span class="test2">
             XYZ
        </span>
        <span class="test3">LM</span>
    </div>
    </body>
    <script src="../less.min.js" type="text/javascript"></script>
    </html>

//命名参数
    .mixture(@c:red,@fs:30px) {
      font-weight: bold;
      font-size: @fs;
      color: @c;
    }
    
    .test1 {
      width: 200px;
      height: 200px;
      border: 1px solid blue;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .test2 {
        .mixture(@fs:40px)
      }
    }

.test1 {
      width: 200px;
      height: 200px;
      border: 1px solid blue;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .test1 .test2 {
      font-weight: bold;
      font-size: 40px;
      color: #ff0000;
    }

--------------------

**匹配模式：注意@\_调用其它同名规则集就会默认调用此规则集**

注意这个三角形，已经写成了一个API接口，直接通过@import '三角形接口的规则集.less'引入，然后就传参就可以了。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
    <div class="triangle"></div>
    </body>
    <script type="text/javascript" src="../less.min.js"></script>
    </html>

@import "triangleApi.less";
    
    .triangle {
      .mixture(T, @bw:200px, @bc:red);
    }

.mixture(@_,@bw,@bc) {
      width: 0;
      height: 0;
    }
    
    .mixture(T,@bw,@bc) {
      border-width: @bw;
      border-style: solid;
      border-color: @bc transparent transparent transparent;
    }
    
    .mixture(R,@bw,@bc) {
      border-width: @bw;
      border-style: solid;
      border-color: transparent @bc transparent transparent;
    }
    
    .mixture(B,@bw,@bc) {
      border-width: @bw;
      border-style: solid;
      border-color: transparent transparent @bc transparent;
    }
    
    .mixture(L,@bw,@bc) {
      border-width: @bw;
      border-style: solid;
      border-color: transparent transparent transparent @bc;
    }

--------------------

arguments变量：比较鸡肋，但是别人在用的使用要看的懂。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/arguments.css"/>
    </head>
    <body>
    <div class="test1">
        <span class="test2">
             XYZ
        </span>
        <span class="test3">LM</span>
    </div>
    </body>
    <script src="../less.min.js" type="text/javascript"></script>
    </html>

.mixture(@1,@2,@3){
      border:@arguments;
    }
    .test1{
      width:200px;
      height:200px;
      .mixture(@1:1px, @2:solid, @3:red)
    }