一、变量
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译后:
#header {
width: 10px;
height: 20px;
}
二、混合:
@bortop:2px dotted #333;
@colorOne: pink;
.bordered {
border-bottom: 2px dashed black;
border-top: @bortop;
}
#weight {
font-weight: bold;
letter-spacing: 60px;
}
三、嵌套:
.headerObj {
border-radius: 50%;
@bg: green;
p {
font-size: 50px;
color: @colorOne;
text-decoration: none;
.bordered(); //将类名当做函数进行调用;
#weight();
background-color: @bg;
span {
text-decoration: line-through;
background-color: @bg;
}
}
}
四、规则:
.component {
width: 300px;
height: 300px;
background-color: yellow;
@media (min-width: 768px) {
width: 600px;
background-color: blue;
}
@media (min-width: 1280px) {
width: 800px;
background-color: green;
}
}
编译后:
.component {
width: 300px;
height: 300px;
background-color: yellow;
}
@media (min-width: 768px) {
.component {
width: 600px;
background-color: blue;
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
background-color: green;
}
}