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