-
变量: LESS 允许你使用变量来存储和重复使用值。变量以
@
符号开头。@primary-color: #3498db; body { color: @primary-color; }
-
嵌套规则: LESS 支持嵌套规则,使得样式表的结构更加清晰。这可以通过在样式中使用嵌套选择器来实现。
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; margin-right: 5px; } }
-
混合(Mixin): 混合允许你在一个样式中引入另一个样式的规则,这有助于避免样式重复。
.border-radius(@radius) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .box { .border-radius(5px); background-color: #eee; }
-
导入文件: 使用
@import
可以将多个 LESS 文件组织成一个文件,以便更好地管理样式表。@import "variables.less"; @import "mixins.less"; body { color: @primary-color; } .box { .border-radius(5px); }
-
运算: LESS 支持数字运算,这使得你可以对属性进行计算。
@base: 5px; @padding: @base * 2; .box { padding: @padding; }
-
条件语句: LESS 支持条件语句,允许你根据条件选择性地应用样式。
@theme: dark; .box { color: white; @if (@theme = light) { background-color: #fff; } @else { background-color: #333; } }
这些基本概念可以帮助你更好地使用 LESS 来组织和管理样式表。了解这些特性将使你能够更高效地编写可维护的样式代码。