less中的注释、less中的公共变量怎么写、变量延迟加载

冷不防 2021-10-19 05:14 377阅读 0赞

# less中的注释 #

**以//开头的注释，不会被编译到css文件中**

**以/\*\*/包裹的注释会被编译到css文件中**

//style.less文件
    /*这里注释会被编译到css文件中*/
    .less-test1 {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .less-test2 {
        font-weight: bold;
        font-size: 20px;
      }
    }

/*这里注释会被编译到css文件中*/
    .less-test1 {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .less-test1 .less-test2 {
      font-weight: bold;
      font-size: 20px;
    }

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

# less中的公共变量怎么写 #

**公共变量用@**

*运用场景：你的样式中对于宽、高、颜色、边距等样式都有规定，需要多地方都要运用到，这个时候用公共变量是非常方便的！*

//style.less文件
    //公共变量用@
    @color:blue;
    .less-test1 {
      width: 200px;
      height: 200px;
      border: 1px solid @color;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .less-test2 {
        font-weight: bold;
        font-size: 20px;
      }
    }

注意：选择器和属性名，变为公共的变量后怎么去使用？（了解一下，用的不多）

*在这里需要填一个坑：选择器名的名字不要带有 - 否则考拉会报错；*

//style.less文件
    //公共变量用@
    @color: blue;
    @selector: .test1;
    @fs: font-size;
    
    @{selector} {
      width: 200px;
      height: 200px;
      border: 1px solid @color;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .test2 {
        font-weight: bold;
          @{fs}: 30px;
      }
    }

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

# 变量延迟加载 #

<!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="test1">
        <span class="test2">
             XYZ
            <span class="test3">
                XTY
            </span>
        </span>
    
    </div>
    </body>
    <script src="../less.min.js" type="text/javascript"></script>
    </html>

//公共变量用@
    //变量延迟加载
    @variate: red;
    
    .test1 {
      @variate: blue;
      width: 200px;
      height: 200px;
      border: 1px solid @variate; //@variate==green
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      @variate: green;
    
      .test2 {
        @variate: yellow;
        font-weight: bold;
        font-size: 30px;
        color: @variate;
    
        .test3 {
          color: @variate //@variate==yellow
        }
      }
    }