less 的 & 详解

背景介绍

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。使用less我们就会经常用到&，它的用途有很多，今天写组件的时候遇到了几个问题所以整理一下

& 作用介绍

内层选择器前面的 & 符号就表示对父选择器的引用。在一个内层选择器的前面，如果没有 & 符号，则它被解析为父选择器的后代；如果有 & 符号，它就被解析为父元素自身或父元素的伪类。同时用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上

通过🌰解析&引用父级的多个使用场景

首先我们先写一段html结构

  // 这是一段pug模版语法
  .demo
      p.demo-title title
      p.demo-desc
        span.demo-desc-font 2333
        img.demo-desc-img(src='')

解析之后会被编译成

<div class="demo">
  <p class="demo-title">title</p>
  <p class="demo-desc">
    <span class="demo-desc-font">2333</span>
    <img src="" class="demo-desc-img">
  </p>
</div>

下面我们需要给这段结构写一段css的样式，我们通过less来写。

1. 当前选择器的伪类或者伪元素。如 :hover :focus :after :before等

.demo {
   &:after {
    content: '.';
    display: block;
    background-color: aquamarine;
  }
}

上面的代码编译后会变成

.demo:after {
  content: '.';
  display: block;
  background-color: aquamarine;
}

2. 作为内层选择器表示对父选择器的引用。这里要注意在写less的嵌套的时候会有差异

.demo {
  &-title {
    text-align: center;
  }
}

上面这段代码会被编译成

.demo-title {
  text-align: center;
}

上面的&引用了.demo，注意这里虽然是嵌套的写法但仅代表选择器的引用而不是css的嵌套关系，和下面的代码有css层级的不同

.demo {
  .demo-title {
    text-align: center;
  }
}

上面这段代码会被编译成

.demo .demo-title {
  text-align: center;
}

明显可以看出上面&的写法少一个.demo的层级，这样就需要注意css的优先级问题。如果要使上面的写法得到和下面的一样的结果就需要增加一个&的引用，即

.demo {
  & &-title {
    text-align: center;
  }
}

解析后则会增加一个.demo的层级

.demo .demo-title {
  text-align: center;
}

这说明在一个选择器中，& 可以重复出现多次，这样，就可以多次引用父选择器而不必重复它的名字。比如

• && 表示.demo.demo
• & & 表示.demo .demo
• &, & 表示.demo, .demo

这样的写法需要注意的是它重复所有的祖先选择器，而不是仅仅重复最近的父选择器。例如：

.demo {
  .demo-desc {
    &-font {
      color: #fff;
    }
  }
}

解析之后会变成

.demo .demo-desc-font {
  color: #fff;
}

高级用法

反转嵌套的顺序并且可以应用到多个类名上。上例子:

.demo-title {
  .demo & {
    font-size: 20px;
  }
}

上面的代码解析后则会变成

.demo .demo-title {
  font-size: 20px;
}

后面会持续更新。。。。