less 语法

less入门

less笔记会随着时间进行更正

再次更新：2019/10/11 18:04

个别概念名为易于形容其功能，另取别名，可以注意下

几个概念

• less是什么？
  • 一种css预编译处理语言，能使用变量，函数等功能，比css具有更强大的功能
• less的编译环境简单，不像sass这类预处理器需要在特殊环境下才能编译
• less文件需要less预处理器编译成css文件后，才能在浏览器上运行
• 编译方法
  • html中通过script标签在less文件之前引入less.js文件，对less文件进行自动编译成css
  • 通过node下的lessc命令手动编译成css文件
  • 在webpack中引入less-loader处理器自动编译less文件
  • 提前编译less文件优于大于另对less.js文件发起网络请求
• 以.less为文件名后缀

less语法

• 变量

  • 声明

  @变量名:变量值;

  • 引用

  @变量名

    @color: red;
    *{
        color: @color;  // 引用less变量
    }
  

  • 变量可运算，最左边的单位优先级最高

   @var1: 1rem;
   @var2: 1.5px;
   @var3: 1vh;
   @nowVar: @var1+@var2+@var3;   // @nowVar: 3.5rem
  

• 转义

  • ～ "变量值"
  • 使变量原样输出变量值

   @screenSize: ~"(max-width: 992px)";    // 定义转义
   a{
          @media screen and @screenSize{
              color: yellow;
          }
      }
  
  编译成
  
  @media screen and (max-width: 992px){
       a{
          color: yellow
      }
  }
  

• 混合

  • 混合相当于一个js函数
  • 可以将一个规则集混入另一个规则集
  • 可以使用类选择器或id选择器
  • 普通混合

    • 特点
      less编译后，定义的混合会存在于less文件中

      .mixins{    //定义混合
          color: red;
      }
      a{
          font-size: 1px;
          .mixins;    //混入混合
          //另一种写法：.mixins();
      }
      

  • 类函数混合

    • 特点
      less编译后，定义的混合不会存在less于文件中

      .mixins(){    //定义混合
          color: red;
      }
      a{
          font-size: 1px;
          .mixins;    //混入混合
          //另一种写法：.mixins();
      }
      

    • 混合可以类似函数传递参数

      .mixins(@color;@fontSize){    //定义混合
          color: @color;
          font-size: @fontSize;
      }
      a{
          @color: red;
          @fontSize: 16px;
          .mixins(@color;@fontSize);
      }
      

嵌套

• 定义

  • 按照html标签的包裹顺序，将选择器层层嵌套进行书写，易于以后查找和修改

  html结构：
  
  
      
  
  
  
  
  
  less嵌套写法：
  body{
      .div1{
          color: red;
          ul{
              color: black;
          }
      }
      .div2{
          color: yellow;
      }
  }
  

• less中的@media

  • 选择器中的@media写法

    .div1{
        @media (max-width: 576px){
            max-width: 576px; 
        }
    }
    .div2{
        @media (max-width: 992px){
            max-width: 768px; 
        }
    }
    
    less编译成
    
    @media (max-width: 992px){
        .div2{
            max-width: 768px;
        }
    }
    @media (max-width: 576px){
        .div2{
            max-width: 576px;
        }
    }
    

命名空间

• 当混合过多，需要同时命名多个相同名称的混合时，可以通过定义不同的命名空间来加以区分

• 同混合类似，可以用类选择器或id选择器

• 可对命名空间中的混合传入参数，但不可给命名空间传入参数，注意在命名空间内且在混合外定义的变量不会生效

• 命名空间引用时，不能加括号，等价于不能给命名空间传参

• 引用方式

  • 命名空间的类选择器(id选择器)混合的类选择器(id选择器)()
  • 命名空间的类选择器(id选择器)>混合的类选择器(id选择器)()

  #Color(){
      #red(@color: yellow){
          color: @color;
      }
  }
  a{
      #Color#red();
      // 或者 #Color>#red();
  }
  

• 映射(less版本大于3.5以上可使用)

  • 类似于js类的属性

  #colors() {
      primary: blue;
      secondary: green;
  }
  .button {
      color: #colors[primary];
      border: 1px solid #colors[secondary];
  }
  
  编译成
  
  .button {
      color: blue;
      border: 1px solid green;
  }
  

• 作用域

  • 变量会懒加载，等待less文件加载完成后，会按照在当前区域，从下上至下查找声明的变量对应的值，后面声明的同区域的变量优先级高，当前区域未找到变量，向上一区域按照此规则继续查找，直至找到对应变量

  例1：
  @color: red;
  a{
      @color: yellow;
      span{
          color: @color;  // 此时的color: black;
      }
      @color: black;
  }
  例2：
  @color: red;
  a{
      @color: yellow;
      color: @color;  // color: black
      @color: black;
  }
      @color: pink;
  

• 注释

  • less的两种注释符号编译处理方式不同
  • /**/会原样复制到编译后的css文件中
  • //会在编译后的css文件中被删除

• 导入

  @import "less文件路径";

  • 导入其他less文件可以使用该less文件中的变量，混入,命名空间和映射

---

随手点个赞，谢谢大家

---

更多文章 我的github