less中&的用法

.head{

.conent{

}

&.menu{

}

}

less编译后

.head{}

.head .content{}//父子关系

.head.menu{}//并且关系

 

2:

.head{

.conent{

}

.menu &{

}

}

less编译后

.head{}

.head .content{}//父子关系

.menu .head{}//父子关系转变

3:组合

.a,.b,.c{

& + &{

}

}

less编译后

.a+.a,.a+.b,.a+.c,.b+a,.b+.b,.b+.c,.c+.a,.c+.b,.c+.c

 

 

/deep/ --------------- less深度作用域

1. <style scoped>

2. .a >>> .b { /* ... */ }

3. </style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }