为什么使用Less替代原始CSS？

What is Less？

Less 是一种 CSS 预处理器，它在 CSS 的基础上添加了许多有用的特性，提供了更高效、更灵活的方式来编写样式代码。

特性：

1、变量（Variables）

优势： 可以定义一个值并在整个样式表中重复使用，便于维护和修改。当需要改变某个颜色、字体大小等样式时，只需修改变量的值，所有使用该变量的地方都会自动更新。
示例：

css 复制代码

// 定义变量
@primary-color: #007bff;
@font-size-base: 16px;

// 使用变量
body {
  color: @primary-color;
  font-size: @font-size-base;
}

a {
  color: @primary-color;
}

2、嵌套规则（Nesting）

优势： 允许在 CSS 规则中嵌套其他规则，使代码结构更清晰，更符合 HTML 结构的层级关系，提高了代码的可读性和可维护性。
示例：

css 复制代码

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3、混合（Mixins）

优势： 可以将一组 CSS 声明封装成一个类或 ID，然后在其他选择器中重复使用，避免了代码的重复编写。混合还可以接受参数，进一步提高了代码的灵活性。
示例：

css 复制代码

// 定义混合
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// 使用混合
// 通过混合，我们可以方便地在不同的元素上应用相同的圆角效果，并且可以根据需要调整圆角的大小。
.button {
  .border-radius(5px);
}

.box {
  .border-radius(10px);
}

4. 运算（Operations）

优势： 支持在样式表中进行数学运算，如加、减、乘、除等，可以根据已有的值动态计算新的样式值，提高了样式的灵活性。
示例：

css 复制代码

@base-font-size: 16px;
@heading-font-size: @base-font-size * 1.5;

h1 {
  font-size: @heading-font-size;
}

5. 函数（Functions）

优势： 提供了一些内置函数，如颜色处理、字符串处理等，可以方便地对样式值进行转换和处理。
示例：

css 复制代码

@base-color: #ff0000;
@lighter-color: lighten(@base-color, 20%);

body {
  background-color: @lighter-color;
}

6. 导入（Importing）

优势： 可以将多个 Less 文件合并成一个，便于组织和管理样式代码。通过将不同功能的样式代码分散到多个文件中，可以提高代码的可维护性和复用性。
示例：

css 复制代码

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

body {
  color: @primary-color;
  .border-radius(5px);
}

7. 作用域（Scope）

优势： Less 具有类似于编程语言的作用域规则。当查找一个变量时，它会先在当前作用域中寻找，如果找不到，会向上一级作用域继续查找，这与 JavaScript 的作用域查找机制类似。
示例：

css 复制代码

@color: blue;

#header {
  @color: green;
  h1 {
    color: @color; // 使用局部变量 @color，值为 green
  }
}

h2 {
  color: @color; // 使用全局变量 @color，值为 blue
}

8. 条件判断（Condition Judgment）

优势： Less 支持简单的条件判断（使用 when 关键字）和循环（通过递归混合实现），这使得在编写样式时可以根据不同的条件生成不同的样式，或者批量生成相似的样式规则，增强了样式代码的动态性和灵活性。
示例：

css 复制代码

.mixin(@a) when (@a > 10) {
  color: red;
}

.mixin(@a) when (@a <= 10) {
  color: blue;
}

.element {
  .mixin(5); // 由于 5 <= 10，元素颜色为蓝色
}