LESS和Sass是流行的CSS预处理器，它们为CSS的编写和管理提供了更强大的功能和灵活性。通过使用变量、嵌套、混合、运算等特性，我们可以编写更具可维护性和可读性的样式表。
LESS基础
变量
LESS允许使用@符号定义变量，这使得样式重复的部分可以被抽象出来。
1
2
3
4
5
6
7
| @primary-color: #4CAF50;
@padding: 10px;
.button {
background-color: @primary-color;
padding: @padding;
}
|
上面的代码中，我们定义了两个变量@primary-color和@padding，在样式中使用它们，便于后期修改。
嵌套
LESS支持嵌套规则，使得样式结构更加清晰。
1
2
3
4
5
6
7
8
9
| .nav {
ul {
list-style: none;
}
li {
display: inline;
margin-right: 10px;
}
}
|
上述示例中，.nav内的ul和li元素被清晰地嵌套在一起。
混合
使用.mixin可以创建可复用的样式。
1
2
3
4
5
6
7
8
9
| .rounded-corners(@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.button {
.rounded-corners(5px);
}
|
这里定义了一个混合rounded-corners，它接受一个参数@radius，以应用不同的圆角样式。
运算
LESS支持直接在样式声明中进行计算。
1
2
3
4
5
6
| @width: 100px;
.box {
width: @width * 2;
height: @width / 2;
}
|
运算的结果会被编译为相应的CSS值。
Sass基础
变量
Sass使用$符号定义变量，功能类似于LESS。
1
2
3
4
5
6
7
| $primary-color: #3498db;
$padding: 20px;
.button {
background-color: $primary-color;
padding: $padding;
}
|
变量在整个样式表中都可以使用，便于统一管理。
嵌套
Sass同样支持嵌套，层级清晰。
1
2
3
4
5
6
7
8
9
| .nav {
ul {
list-style: none;
}
li {
display: inline;
margin-right: 15px;
}
}
|
嵌套结构使得样式更加直观。
混合
Sass中的@mixin和@include能够实现样式的重用。
1
2
3
4
5
6
7
8
9
| @mixin rounded-corners($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
.button {
@include rounded-corners(10px);
}
|
在此示例中，@mixin定义了一个混合并通过@include调用。
运算与函数
Sass也支持运算，可以进行更复杂的计算。
1
2
3
4
5
6
| $width: 200px;
.box {
width: $width / 2;
height: $width * 1.5;
}
|
你还可以使用内置函数，比如lighten和darken。
1
2
3
| .button {
background-color: lighten($primary-color, 10%);
}
|
这段代码会将$primary-color的颜色变亮10%。
总结
LESS与Sass都是强大的CSS预处理器，能够让样式代码更具可读性和可维护性。选择使用哪个取决于项目需求和个人习惯。在实际开发中，合理使用变量、嵌套、混合和运算，将大大提升CSS的编写效率。
