跟我一起了解less（7）：伪类、&连接符、属性连接
说到&符号，前几章的介绍中都已经遇到过了，比如说.box-part1&:before{}。
先说说伪类，由于伪类在css中使用“:”（冒号）来引用的，而“:”（冒号）在less是用来属性和变量赋值的特殊符号，所以less给出了一个新的策略“&”符号。
而伪类在css中是附属在某个实际存在的模块上的类，也可以说是和这个模块连接起来的类，所以用&连接符也是最恰当不过的了。
下面通过几个例子，来详细介绍一下&连接符的用处：
1、伪类的连接
.box-part1 {
width:50px;
height:50px;
line-height: 50px;
border-radius:1em;
color:burlywood;
background:blueviolet;
transition: 1.5s ease transform;
}
.box-part1 { //作用域的方式进行连接
@content:"before";
&:before { //&和：之间不能有空格
content:@content;
}
}
.box-part1&:hover{ //同一级连接
transform:rotate(360deg);
}
下面是演示结果：
2、when的连接
.changeColor(...) {
@argumentsCnt : length(@arguments);
& when (@argumentsCnt = 0) , (@argumentsCnt > 1) {
background:sandybrown;
}
& when (@argumentsCnt = 1) {//&和when之间可以有空格，也可以没有空格
background:@arguments;
}
}
.box-part2 {
.box-part1; //这里我沿用上面例子的样式
.changeColor(red); //通过when函数指定颜色
}
.box-part3 {
.box-part1;
.changeColor(); //通过when函数使用默认颜色
}
这是演示结果：
3、变量或单词来组合选择器名
@selector-header:box-part;
.@{selector-header} { //分组选择
&:before { //你可以通过这个选择器连接伪类
content:"box-part";
}
&1 { //你还可以以这个选择器名为前缀去组装新的选择器
background:#F0F;
}
&2 { //如果选择器的名字很长，且很有规律，只需要写一遍就行了
background:#E1E;
}
}
.box-part6 { //并列选择
#box6- { //逗号有并列和或者的含义，这样就可以并列连接多个有相同前缀或相同父级的选择器了
&sub1 , &sub2 { //如果选择器的名字很长，这样会很方便
width:10px;
height:10px;
background:red;
}
}
}
#box6-sub3 { //逆向选择
.box-part6 & { //这样看似是#box6-sub3包含.box-part6，其实正相反，而是.box-part6包含#box6-sub3
width:25px;
height:25px;
background:blue;
}
}
#box7-sub1,#box7-sub2,#box7-sub3 { //自动组合所有选择
& &-animi {color:black;} //上面并列的三个选择器会有9种组合
}
所以从上个例子可以看出&符号所代表的是它之前所有的内容。
4、变量或单词来组合属性名
.prefixed(@property,@value) {
-webkit-@{property}: @value; //通过连接属性名解决不同浏览器的兼容问题
-moz-@{property}: @value; //但是属性的连接不需要&符号，这点要注意
-ms-@{property}: @value;
-o-@{property}: @value;
@{property}: @value;
}
.box-part1 {
width:50px;
height:50px;
background:blueviolet;
.prefixed(border-radius, 1em);
.prefixed(animation-duration, 1s);
.prefixed(animation-name, _part_);
.prefixed(animation-iteration-count, infinite);
.prefixed(animation-timing-function, linear);
}
@keyframes _part_ {
100%{.prefixed(transform,rotate(360deg));}
}
注意：要通过变量来连接属性名，不需要任何符号，包括&符号，但变量要加{}大括号包裹起来
5、属性值的合并
.box-part2 {
width:50px;
height:50px;
border+_:1px solid; //通过“+_”或“+”符号开启连接
}
.box-part3 {
.box-part2;
border+_:red; //同样通过“+_”或“+”符号进行合并
}
这里说明一下：如果想要执行属性值的合并，第一个被合并的属性就需要加上“+_”合并符号。
to be continue ......
