变量 Variables

1
2
3
4
5
6
@header-height:60px;
@footer-height:686px;
.header {
    height: @header-height;
    background-color: @header-bottom-bgcolor;
}

混合 Mixins

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.fl{
    float: left;
}

.fr() {
    float: right;
}

.nav {
    .fl();
}

.profile {
    .fr();
}

在 css 里面并没有 fr,因为被认作是调用的样式，不是输出的样式

1
2
3
4
5
6
7
8
9
.fl {
float: left;
}
.nav {
float: left;
}
.profile {
float: right;
}

参数混合 Parametric-Mixins

1
2
3
4
5
6
7
8
9
10
11
12
.border-radius(@radius:50)  <!-- 默认50% --> {
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}

.profile__ava{
    width: 36px;
    height: 36px;
    margin: 12px;
    .border-radius(50%);
}

参数逻辑条件混合 Mixin_Guards

1
2
3
4
5
6
7
#color(@name) when(@name=white) {
    color:#fbfbfb;
}

.nav__item{
#color(white);
}

多个合在一起写

1
2
3
4
5
6
7
8
9
10
11
12
.font(@size) {
    &when(@size=small) {
        font-size:8px;
    }
    &when(@size=large) {
        font-size:26px;
    }
}

div {
    .font(small);
}

嵌套规则 Nested Rules

1
2
3
4
5
6
7
8
9
10
11
12
.nav__item {
    ...
}

.nav__item:hover {
    ...
}

.nav__item_icon_now{
    ...
}

等于

1
2
3
4
5
6
7
8
9
10
.nav {
    &__item{
        &:hover{
            ...
            }
        &_icon-new {
            ...
        }
    }
}

空格子元素

1
2
3
4
5
.parent{
    .sub{
        color:red;
    }
}

等于

1
2
3
.parent .sub {
    color:red;
}

&引用

1
2
3
4
5
.parent{
    &__sub{
        color:red;
    }
}

等于

1
2
3
.parent__sub {
    color:red;
}

“变量是存储信息的容器”、”变量能保存其他数据类型”是JavaScript的语法，less中的变量，可以一次定义，重复使用，由于变量只能定义一次，其本质就是常量。

Less的注释有两种，分别是“//”单行注释和“//”多行注释，并且单行注释不会输出，多行注释以原生css的注释作为最终输出，因此“// 单行注释，不会作为最终输出”、“//多行注释，以原生CSS注释的形式作为最终输出”符合题意