Less -- 诡异的空格

Original:

1
2
3
4
5
6
7
8
9
10
11
.a {
&.a-b {
&:hover {
background-color: #5cb85c;
}
}
}

.a-c {
&:extend(.a .a-b:hover);
}

Compiled:

1
2
3
4
5
$ lessc test.less
extend ' .a .a-b:hover' has no matches
.a.a-b:hover {
background-color: #5cb85c;
}

Improved:

1
2
3
4
5
6
7
8
9
10
11
.a {
&.a-b {
&:hover {
background-color: #5cb85c;
}
}
}

.a-c {
&:extend(.a.a-b:hover);
}

Compiled:

1
2
3
4
5
$ lessc test.less
.a.a-b:hover,
.a-c {
background-color: #5cb85c;
}

css选择器:

  • .a.a-b表示同一个元素同时包含两个类,
  • .a .a-b表示子元素选择器,表示当前有a-b类并且某一级父元素含有a
  • .a, .a-b表示多个独立选择器,表示选择当前有a类或者含有a-b类的的元素