【CSS】关于less中 & 的作用

最新推荐文章于 2023-11-29 14:28:05 发布

原创最新推荐文章于 2023-11-29 14:28:05 发布 · 3.4k 阅读

11 ·

CC 4.0 BY-SA版权

本文为【tanpenggood】原创文章，允许转载，但转载必须注明出处并附带首发链接！

CSS系列专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了LESS预处理器中&符号的三种关键用途：作为父级类引用，改变选择器顺序，以及组合排列。通过具体代码示例，展示了&如何影响LESS到CSS的编译过程。

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;
}