Less是一种流行的CSS预处理器，它扩展了CSS的功能，使得样式表更易于维护和组织。以下是Less的主要语法特性：
1. 变量
使用@符号定义变量：
```less
@primary-color: #4CAF50;
.button {
background-color: @primary-color;
}
```
2. 嵌套规则
允许在选择器内部嵌套其他选择器：
```less
.header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
```
3. 混合（Mixins）
定义一组可重用的属性：
```less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.button {
.border-radius(5px);
}
```
4. 运算
支持数学运算：
```less
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
```
5. 函数
Less提供了多种内置函数：
```less
@color: #888;
background-color: lighten(@color, 10%);
```
6. 导入
可以导入其他Less文件：
```less
@import "reset.less";
```
7. 注释
支持单行和多行注释：
```less
// 这是单行注释
/* 这是多行注释 */
```
8. 命名空间和访问符
组织代码并避免命名冲突：
```less
#bundle {
.button {
display: block;
}
}
#header a {
color: #bundle.button;
}
```
9. 作用域
变量和混合遵循作用域规则：
```less
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
```
10. 条件语句
使用when关键字：
```less
.mixin(@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin(@a) when (lightness(@a) < 50%) {
background-color: white;
}
```
这些特性使得Less成为一个强大的CSS预处理工具，能够帮助开发者写出更加简洁、可维护的样式代码。如果您想了解更多具体的用法或者有任何疑问，请随时告诉我。