I have HTML layout as below:

<div class="card">
    <div class="section">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

Compiled CSS should look like:

.card{
}

.card .section .item{
}

.card .section .item+.item{
}

What I'm writing in SCSS:

.card{

    .section{

        .item{

            &+&{
            }
        }
    }
}

Can we have something like & + &, which is not working, I do not want to write,

.card{

    .section{

        .item{
        }
        .item+.item{
        }
    }
}

& is the parent selector, you can't use two & because then you'd be out of the scope. In that case, just go up one block.

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; } /* Look at notes below */
  }
}

Compiles to

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover { /* parent selector is replaced :D  */
      color: red; }

If you used two & adjacently you would be in the parent of the parent, which wouldn't make sense since you can just write your sass or scss one code block higher in the hierarchy.

DOCUMENTATION: Referencing Parent Selectors: &

Related Articles