in SASS, post selector ampersand doesnt work when used in a nested structure

Question

my markup is let's say:

<div class="container marker">
  <div class="parent">
    <div class="child">
      content
    </div>
  </div>
</div>

and my scss would be

.container {
  .parent {
    .child {
      .marker & {
        background: red;
      }
    }
  }
}

As long as I put the child styling nested in parent's with the marker class, the ampersand (&) rule doesn't engage. but if i write:

.parent {
  .child {
    .marker & {
      background: red;
    }
  }
}

everything seems fine. why? what am I missing?

example in CodePen: http://codepen.io/anon/pen/GgRvOV

Answer 1

Because the output of your sass would be:

.marker .container .parent .child {
  background: red;
}

Because you are telling the sass to output .marker & which is saying this is the parent of this chain, so .container is being treat as the first child of .marker.

You need to do:

.parent {
  .child {
    .container.marker & {
      background: red;
    }
  }
}

Which will output the vanilla CSS:

.container.marker .parent .child {
  background: red;
}

A great tool to help you understand how you sass outputs is http://sassmeister.com/

Answer 2

Other alternative is by using variable(s) and SASS’s Interpolation Syntax, using this will keep your original nesting

.container {
  $c: &;    // store parent into variable
  .parent {
    .child {      
      #{$c}.marker & {
        background: red;
      }
    }
  }
}

output:

.container.marker .container .parent .child {
  background: red;
}