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; }

The selectors are exported correctly if the .fooStuffs is take outside of #bigFoo.

What version of SASS are you using? And what are you compiling with? This is what I compile to using the latest Web Essentials 2013.

#bigFoo {
    color: #f00;
}

#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;
}

#bigFoo::after {
    content: "";
    right: 0;
}

Your output also suffers the same issue as mine does.

#bigFoo #bigFoo::before should be #bigFoo::before

I can see why it's happening. Not sure what the solution is yet.

Didn't notice that :) I think you're probably better off using a silent class in this case and extending that.

%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;
}

#bigFoo {
    color: #f00;
    @extend %fooStuffs;

    .fooStuffs {
        @extend %fooStuffs
    }

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

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

Outputs:

#bigFoo, 
#bigFoo .fooStuffs, 
#bigFoo:before, 
#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 {
    color: #f00;
}

#bigFoo:before {
    left: 0;
}

#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.