less

重点功能功能

变量/ 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

 

转载于:https://www.cnblogs.com/jian1234/p/9967813.html