LESS 简介

• LESS 是一种 CSS 预处理器，允许使用变量、嵌套、混合、继承等高级特性编写 CSS，增强了代码的灵活性和可维护性。
• 文件扩展名：.less。

安装LESS

• 安装 LESS：使用 Node.js 安装 LESS

  npm i less
  

LESS 核心特性

变量

• 使用 @ 符号定义变量，便于在样式表中复用相同的值。

  <style scoped lang="less">
  @primary-color: #3498db;
  
  .login {
    width: 300px;
    height: 250px;
    background-color: @primary-color;
  }
  </style>
  

嵌套

• 可以在选择器中嵌套其他选择器，使层级结构更加直观。

  <style scoped lang="less">
  nav {
    ul {
      list-style: none;
      li {
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
  </style>
  

混合

• LESS 中的混合可以包含一个或多个样式属性，通过类名或标识符来复用。

  <style scoped lang="less">
  .radius {
    border-radius: 5px;
  }
  
  .box1 {
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    .radius;
  }
  </style>
  

• 带参数的混合：混合中可以使用参数来动态调整样式。

  <style scoped lang="less">
  .border-radius(@radius) {
    border-radius: @radius;
  }
  
  button {
    .border-radius(10px);
  }
  </style>
  

运算

• LESS 支持数学运算，可以在属性值中进行加、减、乘、除等操作。

  @base-width: 100px;
  
  .container {
    width: @base-width * 2;
    padding: @base-width / 4;
  }
  

LESS 函数

LESS 提供了多种内置函数，可以处理颜色、字符串、数学运算等。

• 颜色函数

  <style scoped lang="less">
  @primary-color: #3498db;
  @color1: #73dc36;
  @color2: #f0f404;
  
  .box1 {
    background-color: lighten(@primary-color, 10%);
  }
  
  .box2 {
    background-color: darken(@primary-color, 10%);
  }
  
  .box3 {
    background-color: mix(@color1, @color2, 50%); // 混合两种颜色
  }
  
  .box4 {
    background-color: spin(@color1, 10%); // 旋转颜色的色相
  }
  </style>
  

• 数学函数

  1. ceil(@number): 向上取整。

     @num: 3.14;
     @result: ceil(@num); // 4
     

  2. floor(@number): 向下取整。

     @num: 3.14;
     @result: floor(@num); // 3   
     

  3. round(@number): 四舍五入。

     @num: 3.14;
     @result: round(@num); // 3   
     

  4. abs(@number): 取绝对值。

     @num: -3.14;
     @result: abs(@num); // 3.14    
     

  5. min(@number1, @number2): 返回两个数中的最小值。

     @num1: 10;
     @num2: 20;
     @result: min(@num1, @num2); // 10   
     

  6. max(@number1, @number2): 返回两个数中的最大值。

     @num1: 10;
     @num2: 20;
     @result: max(@num1, @num2); // 20
     

命名空间

@namespace1: {
  color: red;
};

@namespace2: {
  color: blue;
};

.box1 {
  color: @namespace1[color];
}

.box2 {
  color: @namespace2[color];
}

继承

.base {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box {
  .base; 
  background-color: blue; 
  border: 2px solid rgb(0, 255, 4);
}

作用域

LESS 中变量的作用域为局部作用域和全局作用域。局部作用域的变量只在当前代码块内有效。

<template>
  <div class="box">{{ msg }}</div>  
  <p>{{ msg }}</p>
</template>

<style scoped lang="less">
@color: red;

.box {
  @color: blue;
  color: @color;   // 输出蓝色
}

p {
  color: @color;   // 输出红色
}
</style>

导入（@import）

使用 @import 引入其他 LESS 文件，帮助模块化管理代码。

// main.less
@import "reset.less";
@import "variables.less";
@import "mixins.less";

举例：

// variables.less
@primary-color: #3498db;
@secondary-color: #2ecc71;
@font-stack: Arial, sans-serif;

// mixins.less
.border-radius(@radius) {
  border-radius: @radius;
}

.box-shadow(@x, @y, @blur, @color) {
  box-shadow: @x @y @blur @color;
}

// main.less
@import "variables.less";
@import "mixins.less";

body {
  font-family: @font-stack;
  color: @primary-color;
}

.card {
  .border-radius(10px);
  .box-shadow(0px, 4px, 5px, rgba(0, 0, 0, 0.2));
  background-color: lighten(@primary-color, 10%);
}