重点功能功能
变量/ Variables
@header-height:60px;
@header-bottom-bgcolor:#000;
.header{
height: @header-height;
background-color: @header-bottom-bgcolor;
}
混合/Mixins
.fl{
float: left;
}
.logo{
.fl();
width: 128px;
background: #f01400;
height: 36px;
margin: 12px 25px;
}
参数混合/ Parametric Mixins
.border-radius(@radius: 50%){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.profile__ava{
width: 36px;
height: 36px;
margin: 12px;
.border-radius(50px);
}
参数混合逻辑控制 / Mixin Guards
/* 背景色定义 */
#bg-color(@name) when(@name=dark) {
background-color: #2b333b;
}
#bg-color(@name) when(@name=light){
background-color: #363c41;
}
/* 字体大小定义 */
#ft-size(@name) when(@name=small){
font-size: 12px;
}
#ft-size(@name) when(@name=medium){
font-size: 14px;
}
/* 字体颜色定义 */
#color(@name) when(@name=white){
color: #fbfbfb;
}
#color(@name) when(@name=dark){
color: #5c646b
}
#bg-color(dark);
#color(dark);
#ft-size(small)
嵌套 / Nested Rules
.nav{
&__item{
display: block;
float: left;
line-height: 60px;
padding: 0 25px;
text-decoration: none;
#color(white);
#ft-size(medium);
&:hover{
#bg-color(light)
}
&_icon_new{
#bg-color(light)
}
}
}
多层嵌套指令的呈现规则 / Nested Directives and Bubbling