The common usage of & is nothing more than that

.selector {
  / / class
  &:hover {
    color: pink;
  }
  
  / / pseudo elements
  &::after {
    content: "";
  }
  
  // Cascade selector
  &.active {
    background: blue;
  }
  
  // Reverse selection
  .container & {
    color: plum; }}// Compile the CSS
.selector:hover {
  color: pink;
}
.selector::after {
  content: "";
}
.selector.active {
  background: blue;
}
.container .selector {
  color: plum;
}
Copy the code

Here are some other common usages

Class and element are selected simultaneously

For example,

.selector {
  color: blue;
}
a.selector {
  color: red;
}
Copy the code

With Sass, we can reduce the repetition of class names by using the & parent selector and the embedding feature.

But with the CSS style above, it seems that we can’t simplify it with Sass, because we can’t write it like this, which would cause a compilation error

.selector {
  color: blue;
  a& {
    color: red; }}Copy the code

But if you change it to something like this

.selector {
  color: blue; # {a + &} {
    color: red; }}Copy the code

It compiled successfully, but the results were not what we wanted

.selector {
  color: blue;
}
.selector a.selector {
  color: red;
}
Copy the code

So we need to use @at-root to print the selector at the top level

.selector {
  color: blue;
  @at-root# {a + &} {
    color: red; }}// Can get the desired result
.selector {
  color: blue;
}
a.selector {
  color: red;
}
Copy the code

This small function can be encapsulated as a mixin

@mixin qualify($selector) {
  @at-root# {$selector + &} {
    @content; }}Copy the code

It will be much easier to use in the future

.selector {
  color: blue;
  @include qualify(a) {
    color: red; }}Copy the code

This section is from www.sitepoint.com/sass-3-4-is…

Adjacent sibling selector

Let’s start with a simple example

.list {
  .list-item {
    display: block;
    // Omit other styles
  }

  .list-item + .list-item {
    margin-top: 10px; }}Copy the code

We want to add 10px spacing between elements of the.list-item. But the writing was too repetitive, so we changed it

.list {
  .list-item {
    display: block;
    & + & {
      margin-top: 10px; }}}Copy the code

In fact, this is the wrong way to write it, because it compiles

.list .list-item + .list .list-item {
  margin-top: 10px;
}
Copy the code

And to add spacing correctly, what we want to do is

.list .list-item + .list-item {
  margin-top: 10px;
}
Copy the code

So let’s do it the following way

.list {
  .list-item {
    display: block;

    & + .list-item {
      margin-top: 10px; }}}Copy the code

That will do the trick. But it’s repeated.

By the way, if we don’t use the class name, we can use it if we know what the element tag type is

.list{>li {
    display: block;
  }
  > li + li {
    margin-top: 10px; }}Copy the code

But let’s not worry about that for now, so let’s go back to the question of how do we get to the point where we can only write a list item once? Well, there are ways to do that. We treat the &parent selector as if it were a string. We first find the last space, which is followed by the current selector

.list {
  .list-item {
    display: block;
    
    $index: lastIndex(#{&}, "");
    $selector: string.slice(#{&}, $index);
    
    // $selector is.list-item& + # {$selector} {
      margin-top: 10px; }}}Copy the code

So let’s encapsulate these lines so we can use them more than once

@mixin adjacentSiblingSelector {
  $index: lastIndex(#{&}, "");
  $selector: string.slice(#{&}, $index); & + # {$selector} {
    @content; }}Copy the code

Use it as follows, so it is much cleaner

.list {
  .list-item {
    display: block;
    @include adjacentSiblingSelector {
      margin-top: 10px; }}}Copy the code

Last but not least, you should notice the lastIndex function. Sass does not have this function, so we can wrap one ourselves

@function lastIndex($str.$match) {
  $len: string.length($str);
  @while $len > 0 {
    @if string.slice($str.$len.$len) = =$match {
      @return $len;
    }
    $len: $len - 1;
  }
  @return -1;
}
Copy the code

These are some of the usages of the &parent selector. I hope they are useful to you