为什么使用Less替代原始CSS？
What is Less？
Less 是一种 CSS 预处理器，它在 CSS 的基础上添加了许多有用的特性，提供了更高效、更灵活的方式来编写样式代码。
特性：
1、变量（Variables）
- 优势： 可以定义一个值并在整个样式表中重复使用，便于维护和修改。当需要改变某个颜色、字体大小等样式时，只需修改变量的值，所有使用该变量的地方都会自动更新。
- 示例：
// 定义变量
@primary-color: #007bff;
@font-size-base: 16px;// 使用变量
body {color: @primary-color;font-size: @font-size-base;
}a {color: @primary-color;
}
2、嵌套规则（Nesting）
- 优势： 允许在 CSS 规则中嵌套其他规则，使代码结构更清晰，更符合 HTML 结构的层级关系，提高了代码的可读性和可维护性。
- 示例：
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，然后在其他选择器中重复使用，避免了代码的重复编写。混合还可以接受参数，进一步提高了代码的灵活性。
- 示例：
// 定义混合
.border-radius(@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;
}// 使用混合
// 通过混合，我们可以方便地在不同的元素上应用相同的圆角效果，并且可以根据需要调整圆角的大小。
.button {.border-radius(5px);
}.box {.border-radius(10px);
}
4. 运算（Operations）
- 优势： 支持在样式表中进行数学运算，如加、减、乘、除等，可以根据已有的值动态计算新的样式值，提高了样式的灵活性。
- 示例：
@base-font-size: 16px;
@heading-font-size: @base-font-size * 1.5;h1 {font-size: @heading-font-size;
}
5. 函数（Functions）
- 优势： 提供了一些内置函数，如颜色处理、字符串处理等，可以方便地对样式值进行转换和处理。
- 示例：
@base-color: #ff0000;
@lighter-color: lighten(@base-color, 20%);body {background-color: @lighter-color;
}
6. 导入（Importing）
- 优势： 可以将多个 Less 文件合并成一个，便于组织和管理样式代码。通过将不同功能的样式代码分散到多个文件中，可以提高代码的可维护性和复用性。
- 示例：
// main.less
@import "variables.less";
@import "mixins.less";body {color: @primary-color;.border-radius(5px);
}
7. 作用域（Scope）
- 优势： Less 具有类似于编程语言的作用域规则。当查找一个变量时，它会先在当前作用域中寻找，如果找不到，会向上一级作用域继续查找，这与 JavaScript 的作用域查找机制类似。
- 示例：
@color: blue;#header {@color: green;h1 {color: @color; // 使用局部变量 @color，值为 green}
}h2 {color: @color; // 使用全局变量 @color，值为 blue
}
8. 条件判断（Condition Judgment）
- 优势： Less 支持简单的条件判断（使用 when 关键字）和循环（通过递归混合实现），这使得在编写样式时可以根据不同的条件生成不同的样式，或者批量生成相似的样式规则，增强了样式代码的动态性和灵活性。
- 示例：
.mixin(@a) when (@a > 10) {color: red;
}.mixin(@a) when (@a <= 10) {color: blue;
}.element {.mixin(5); // 由于 5 <= 10，元素颜色为蓝色
}