前言
在写vue组件的时候,css使用的是less。有一个样式,总是出不来,后来查了下是自己对于less的用法不了解。下面直接上代码。
当做父级类
.head{
height: 100px;
width: 100px;
border: 1px solid gainsboro;
background-color: #000000;
.content{
background-color: #fff;
}
&.body{
background-color: #72cc26;
}
}
这段less编译之后为:
.head {
height: 100px;
width: 100px;
border: 1px solid gainsboro;
background-color: #000000;
}
.head .content {
background-color: #fff;
}
.head.body {
background-color: #72cc26;
}
这里我们可以看到在类前面添加了&之后,编译之后的css变为且的关系,而没有使用&的css是父子的关系。
这里需要注意.a.b和.a .b之间的区别,.a.b 是且的关系意思就是2者必须都具备,而.a .b是上下级,父子关系
<!--.a.b-->
<div class="a b"></div>
<!--.a .b-->
<div class="a">
<div class="b"></div>
</div>
改变选择器的顺序
.head{
height: 100px;
width: 100px;
border: 1px solid gainsboro;
background-color: #000000;
.content{
background-color: #fff;
}
.content &{
background-color: #fff;
}
}
编译后:
.head {
height: 100px;
width: 100px;
border: 1px solid gainsboro;
background-color: #000000;
}
.head .content {
background-color: #fff;
}
.content .head {
background-color: #fff;
}
组合排列
p, a, ul, li {
border-top: 2px dotted #366;
& + & {
border-top: 0;
}
}
编译后:
p,
a,
ul,
li {
border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
border-top: 0;
}
&会把所有的可能性都排列出来。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。