Less有很多与CSS不同的语法和功能,其中一些最常用的包括:
变量
Less 允许您使用变量来存储值并在整个样式表中重复使用它们。定义变量看起来像这样:
@primary-color: #007bff;
然后您可以在样式中使用变量:
a { color: @primary-color; }
Mixin函数
Less的Mixin函数类似于CSS中的样式类。Mixin函数可以接受参数,并将它们插入到Mixin函数中。定义Mixin函数看起来像这样:
.rounded-corners(@radius: 5px) { border-radius: @radius; }
然后您可以在样式中使用Mixin函数:
.button { background-color: @primary-color; .rounded-corners(10px); }
嵌套
Less允许您在样式规则中嵌套其他规则。这样可以使样式更加清晰和易于阅读。例如,下面是一个使用嵌套的样式:
nav { ul { list-style: none; margin: 0; padding: 0; li { display: inline-block; } } }
以上就是Less常用的语法和功能。通过使用这些语法和功能,您可以更加有效地编写和管理CSS样式。