css预处理器less语法 css3预处理器

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预处理工具，能够帮助开发者写出更加简洁、可维护的样式代码。如果您想了解更多具体的用法或者有任何疑问，请随时告诉我。