Less 语法详解：变量与 extend 使用指南

"这篇文档详细解析了动态样式语言Less中的变量和`extend`特性，旨在帮助读者理解如何在Less中有效利用这些特性增强CSS代码的可维护性和复用性。Less是CSS的一个扩展，它引入了变量、嵌套规则、运算符等功能，使得CSS编写更加灵活和模块化。本文档基于Less的1.4.0版本进行讲解。" 在Less中，变量是提升代码可维护性的重要工具。你可以将常用的值（如颜色、尺寸、字体等）定义为变量，然后在代码的各个部分重复使用。这样，当你需要修改某项设定时，只需要更改变量的值，所有使用该变量的地方都会自动更新，避免了手动查找和替换的繁琐过程。 例如，以下是一个关于变量的简单示例： ```less // 定义变量 @link-color: #428bca; // 海蓝色 // 使用变量 a:link { color: @link-color; } .widget { color: #fff; background: @link-color; } ``` 这段Less代码会被编译成如下CSS： ```css a:link { color: #428bca; } .widget { color: #fff; background: #428bca; } ``` 变量不仅可以应用于属性值，还可以用于选择器名称、属性名（自1.6.0版本起支持）、URL和`import`语句。例如，定义一个变量`@mySelector`来表示一个选择器，或者使用变量`@images`来指定图片路径。 此外，Less的`extend`功能允许你定义一个基础样式，并将其扩展到其他选择器，从而实现样式复用。当使用`extend`时，目标选择器会继承基础选择器的所有规则，而不会生成额外的CSS规则，这对于保持CSS的干净和高效至关重要。 例如： ```less // 基础样式 .button { padding: 10px; border: 1px solid #ccc; } // 扩展基础样式 .primary-button:extend(.button) { background: blue; color: white; } ``` 编译后的CSS将是： ```css .button, .primary-button { padding: 10px; border: 1px solid #ccc; } .primary-button { background: blue; color: white; } ``` 通过这种方式，`.primary-button`继承了`.button`的所有样式，并添加了自己的特定样式，但没有创建重复的CSS规则。 Less的变量和`extend`特性极大地提高了CSS的编写效率和代码的可维护性。它们让你能够更方便地管理样式，减少代码冗余，使你的CSS更加灵活且易于维护。在实际项目中，善用这些特性可以显著提升开发体验和项目质量。