Less cursory learning

Details are on the official website: https://less.bootcss.com/
Insert image description here

lessStydy.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入时，less必须在js前面 -->
    <link rel="stylesheet/less" href="less/less01.less">
    <script src="js/less.js"></script>
</head>
<body>
    <!-- 安装npm install less -g -->
<div class="out">
    <!-- 1、变量 -->
    <div class="variables">变量</div>
    <!-- 2、混合 -->
    <div class="mixins">混合</div>
    <!-- 2、嵌套 -->
    <div class="nesting">
        <div class="inner">嵌套</div>
    </div>
    <!-- 4、命名空间和访问符 -->
    <div class="box"></div>
    <!-- 5、映射 -->
    <div class="maps"></div>
    <!-- 6、作用域 -->
    <div id="page">
        <div id="header"></div>
    </div>
    <!-- 7、less文件导入 -->
    <div id="import"></div>
</div>
</body>
</html>

less01.less file

@variables_width:200px;
@variables_height:@variables_width+20px;   //1、变量运算
.out{
    
    
    display: flex;justify-content: flex-start;flex-wrap: wrap;
}
.all{
    
    
    background-color: rgb(252, 182, 220);
    width: @variables_width;    //1、变量
    height: @variables_height;   //1、变量
    margin: 20px;
    text-align: center;
}
.variables{
    
    
   .all(); // 2、混合
}


.mixins{
    
    
    margin: 100px;
    .all();  // 2、混合
}

.nesting{
    
    
    .all();
    display: flex;align-items: center;justify-content: center;
    .inner{
    
         //3、 嵌套
        width: 100px;height: 100px;background-color: rgb(255, 253, 133);
    }
}

// 4、@规则嵌套和冒泡
.component {
    
    
    width: 300px;
    @media (min-width: 768px) {
    
    
      width: 600px;
      @media  (min-resolution: 192dpi) {
    
    
        background-image: url(/img/retina2x.png);
      }
    }
    @media (min-width: 1280px) {
    
    
      width: 800px;
    }
  }
  
// 5、转义（Escaping）允许你使用任意字符串作为属性或变量值
@min1400: ~"(min-width: 1400px)";
.all {
    
    
  @media @min1400 {
    
    
    background-color: rgb(125, 210, 236);
  }
}

// 6、命名空间和访问符
.a{
    
    .inner{
    
    width: 200px;height: 200px;border-radius: 50%;background-color: rgb(255, 113, 113)}}
.box{
    
    
    margin: 20px;
    .a.inner(); // 还可以书写为 .a > .inner 形式
}


// 7、映射
#colors() {
    
    
    primary: rgb(125, 210, 236);
    secondary: rgb(121, 121, 121);
  }
  
  .maps {
    
    
    width: @variables_width;   height: @variables_height;   margin: 20px;
    background-color: #colors[primary];    //background-color: rgb(125, 210, 236);
    border: 3px solid #colors[secondary];  //border: rgb(121, 121, 121);
  }

//   8、作用域
@var: red;
#page {
    
    
  .all();
  display: flex;justify-content: center;align-items:center;
  #header {
    
    
    height: 100px;width: 100px;border-radius: 50%;
    background-color: @var; // white
  }
  @var: white;
}

// 9导入
@import "library";   // library.less

library.less

#import{
    
    
    width: 200px;
    height: 220px;
    background-color: deeppink;
    margin: 20px;
}

Less cursory learning

Guess you like