Skip to content

Instantly share code, notes, and snippets.

@wheresrhys
Created March 27, 2014 12:38
Show Gist options
  • Save wheresrhys/9806629 to your computer and use it in GitHub Desktop.
Save wheresrhys/9806629 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// First comments - whether the placeholder is added via a mixin, variable or function is
// a red herring. It doesn't even have to be a placeholder - could be a normal selector.
// The problem is essentially to do with using @extend when you're not sure
// if a part of the selector you're extending already targets the html element
// your new fragment of selector is supposed to target
//this approach doesn't work
%test1a {
%placeholder-from-module1 {
%test1b & {
content: 'test1';
}
}
}
.test1a {
@extend %test1a;
}
.test1b {
@extend %test1b;
}
.test1 {
.result1 {
@extend %placeholder-from-module1;
}
}
// this approach fixes the problem (although with an extraneous selector
// due to nested selectors which could do with being tidied up)
%test2a {
&%test2b %placeholder-from-module2 {
content: 'test2';
}
}
.test2a {
@extend %test2a;
}
.test2b {
@extend %test2b;
}
.test2 {
.result2 {
@extend %placeholder-from-module2;
}
}
// this is broken again, and is the biggest worry because the point
// where intermediate-wrapper and test3b are added could be in a different
// module to where test3a is added so %test3b can't make any assumptions
// about whether it shoudl concatenate itself to existing selector fragments
%test3a {
%placeholder-from-module3 {
content: 'test3';
}
}
%test3b .intermediate-wrapper {
@extend %placeholder-from-module3;
}
.test3a {
@extend %test3a;
}
.test3b {
@extend %test3b;
}
.test3 {
.result3 {
@extend %placeholder-from-module3;
}
}
.test1b .test1a .test1 .result1, .test1 .test1b .test1a .result1 {
content: 'test1';
}
.test2a.test2b .test2 .result2, .test2 .test2a.test2b .result2 {
content: 'test2';
}
.test3a .test3b .intermediate-wrapper, .test3b .test3a .intermediate-wrapper, .test3a .test3 .result3, .test3 .test3a .result3 {
content: 'test3';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment