LESS 是一种动态样式语言,扩展了 CSS 的能力。它允许使用变量、嵌套、混合、函数等,使得 CSS 更加可维护和灵活。以下是一些 LESS 语法的基础和示例:
1. 变量
LESS 允许你定义变量来存储值,例如颜色、字体大小等。
@primary-color: #4CAF50;
@font-size: 16px;
body {
color: @primary-color;
font-size: @font-size;
}
2. 嵌套
LESS 允许你嵌套 CSS 选择器,使得样式层级关系更加清晰。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
margin-right: 10px;
a {
text-decoration: none;
color: @primary-color;
&:hover {
text-decoration: underline;
}
}
}
}
}
3. 混合
混合(mixins)是可以重用的样式块,可以带参数。
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(10px);
}
#footer {
.border-radius(5px);
}
4. 运算
LESS 支持基本的算术运算,例如加法、减法、乘法和除法。
@base: 5%;
@width: @base * 2;
@height: @base + 10%;
#banner {
width: @width; // 10%
height: @height; // 15%
}
5. 函数
LESS 提供了一些内置函数,可以用来操作颜色、字符串、数值等。
@base-color: #4D926F;
.lighten(@color, @amount) {
color: lighten(@color, @amount);
}
#header {
.lighten(@base-color, 10%);
}
6. 导入
LESS 文件可以相互导入,使得样式更加模块化。
// variables.less
@primary-color: #4CAF50;
@font-size: 16px;
// styles.less
@import "variables";
body {
color: @primary-color;
font-size: @font-size;
}
7. 高级用法:条件和循环
LESS 也支持条件语句和循环,用于复杂的样式逻辑。
条件语句
.set-background(@color) when (@color = red) {
background: #ff0000;
}
.set-background(@color) when (@color = blue) {
background: #0000ff;
}
#header {
.set-background(red);
}
循环
.generate-columns(@n, @i: 1) when (@i =< @n) {
.col-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.generate-columns(4); // Generates .col-1, .col-2, .col-3, .col-4
示例项目结构
// variables.less
@primary-color: #4CAF50;
@secondary-color: #FF5722;
@font-size-base: 16px;
// mixins.less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// styles.less
@import "variables";
@import "mixins";
body {
font-size: @font-size-base;
color: @primary-color;
.container {
.border-radius(10px);
background: @secondary-color;
}
}
通过这些基础和示例,你可以使用 LESS 来编写更加灵活和可维护的 CSS 代码。LESS 的功能和语法极大地扩展了传统 CSS,使得编写和管理样式变得更加高效。