【CSS】关于less中 & 的作用
Vue项目中基本都会使用CSS的预渲染技术,今天我们来看一下 less 中的 & 符号的作用。
·
Vue项目中基本都会使用CSS的预渲染技术,今天我们来看一下 less 中的
&
符号的作用。
talk is cheap, show me the code.
作用一、当做父级类
.head{
height: 100px;
width: 100px;
border: 1px solid gainsboro;
background-color: #000000;
.content{
background-color: #fff;
}
&.body{
background-color: #72cc26;
}
}
这段 less 编译之后的 css 为
.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;
}
&
会把所有的可能性都排列出来,就像求了笛卡儿积
拓宽
less
和sass
的区别
-
less
是基于JavaScript,是在客户端处理 -
sass
是基于Ruby的,是在服务器端处理 -
关于变量在
less
和sass
中的唯一区别就是 less 用@
,sass 用$
-
输出设置,
less
没有输出设置,sass
提供4中输出选项:nested compact compressed expanded
-
sass
支持条件语句,可以使用if{}else{},for{}
循环等等,而less
不支持
参考
更多推荐
已为社区贡献1条内容
所有评论(0)