Using SCSS parent selector with before and after pseudo-elements & the extend function

gistfile1.scss

#bigFoo {
	color: #f00;

	.fooStuffs {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		
		min-height: 100%;
		min-width: 50%;
		background: url(../images/fooStuffs.jpg) 50px 0px no-repeat;
		background-size: 400px;
		opacity: 0.07;
	}

	&::before{
		@extend .fooStuffs;
		left: 0;
		@include transform(scaleX(-1)); // Using this to flip this image for now.
	}

	&::after{
		@extend .fooStuffs;
		content: "";
		right: 0;
	}
}


// Generated CSS

  #bigFoo .fooStuffs, #bigFoo #bigFoo::before, #bigFoo #bigFoo::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    min-height: 100%;
    min-width: 50%;
    background: url(../images/fooStuffs.jpg) 50px 0px no-repeat;
    background-size: 400px;
    opacity: 0.07; }
  #bigFoo::before {
    left: 0;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1); }
  #bigFoo::after {
    content: "";
    right: 0; }

Nice! I hadn't see the silent classes before. This works with the silent class outside of #bigFoo which is fine. It would have been nice if I could keep it inside but the same selector output issue continues when that's the case.

Thanks again, Colin.