介绍
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
声明变量
变量允许我们定义全局公共样式,在需要的时候进行调用。
@color: #4D926F;
#header {
color: @color;
}
混合
可以在样式A中引入样式B,从而使得样式B继承了样式A,当然还可以如函数一样传递参数。.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
嵌套
通过节点的层级关系进行样式嵌套,使得代码更为清晰。
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
运算
可以进行加减乘除操作,可以对颜色值和属性值进行运算。
@width: 20px;
@color: #4D926F;
.box {
width: @width - 10;
color: @color * 2;
}
匹配
相似功能样式定义多个有参函数,调用时进行匹配
.pos(r) {
position: relative;
}
.pos(f) {
position: fixed;
}
.pos(a) {
position: absolute;
}
.wrapper {
background: #fff;
.pos(f);
}
@arguments变量
函数变量可一起处理.border_radius(@radius: 1px, @color: black, @type: solid){
border:@arguments;
}