4

This is fairly simple :

h2{
    color:blue;
    &.someClass{
         color: red;
      }
   } 
//output:
   h2{color:blue;}, h2.someClass{color: red;}

but when I try the other way around it's not working:

 .someClass{
        color: red;
        h2&{
            color:blue;
        }
    }
//error: invalid selector after h2

//what I want to get: 
  h2.someClass{color:blue;}, .someClass{color: red;}

Obviously, those won't work:

&h2 ->.someClassh2,

& h2 ->.someClass h2,

h2 & -> h2 .someClass

Any solutions?

yonatanmn
  • 1,590
  • 1
  • 15
  • 21
  • Thanks for the duplicate ref. I'm using libsass, so apparently i'm stuck – yonatanmn Apr 14 '15 at 14:27
  • 1
    i don't think the duplicate question link refers to the same question. i think he's asking how to reference a base class as in https://stackoverflow.com/questions/17268051/sass-combining-parent-using-ampersand-with-base-element – drav Sep 13 '17 at 21:31
  • Another duplicate: https://stackoverflow.com/q/16108103/923560 – Abdull Sep 15 '21 at 16:04

1 Answers1

-3

CSS doesn't work that way. The ampersand just strings the tag and class together into readable CSS. Maybe they will eventually add something into the Sass spec to make this work, but for now the ampersand is just replaced with the closest parent in your nest.

Louise Foster
  • 22
  • 1
  • 4
  • 2
    But that's exactly the point!! `h2&` should be evaluated as `h2.someClass` – yonatanmn Apr 14 '15 at 10:04
  • No reasons for the downvotes? If someone has a solution for this I'd love to hear it because, yes, it would be handy. But from what I have read looking into this myself, there isn't a way. If I did something wrong or broke some rules in my comment, also please let me know because I'm new to this and really don't see why I've been downvoted here :/ – Louise Foster Apr 15 '15 at 10:18