Less基本语法
编写的Less文件需要通过编译器转换为常规css后,才能被浏览器识别和应用。
- 变量 (Variables):在 Less 中,可以定义变量并将其用于整个样式表中,减少重复输入和提高一致性。
css
@primary-color: #007bff;
body {
background-color: @primary-color;
}
a {
color: @primary-color;
}
- 嵌套规则 (Nested Rules):类似于 Sass,Less 允许你将选择器嵌套在其他选择器内,模仿 HTML 结构。
css
.header {
color: black;
.logo {
width: 100px;
}
.nav {
list-style: none;
li {
display: inline-block;
}
}
}
- 混合 (Mixins) :混合允许定义一个可以重复使用的样式块,并且可以接受参数。
css
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.button {
.border-radius();
// 或者传入参数
.border-radius(10px);
}
- 函数 (Functions) :Less 提供了多种内置函数以及自定义函数的功能,用于处理颜色、数值和其他类型的值。
css
@base-color: #333;
.body-text() {
color: darken(@base-color, 10%);
}
p {
.body-text();
}
- 运算符与表达式: Less 支持加减乘除和颜色运算,可以动态计算样式值。
css
@width: 500px;
@container-width: (@width - 20px);
.container {
width: @container-width;
}