Henning Fischer Henning Fischer - 7 months ago 48
Sass (Sass) Question

SASS - select headlines of class

I want to give headlines icons (background-image) like this:

.icon_girl {
background-image: url('data:image/svg+xml;charset=UTF-8, ... SVG code ...');
}


Now I want to give H1, H2, H3 etc. different sizes. I tried:

.icon_girl {
background-image: url('data:image/svg+xml;charset=UTF-8, ... SVG code ...');

&h1 {
background-size: 37px;
padding-left: 48px;
}

&h2 {
background-size: 30px;
padding-left: 38px;
}
}


But this, for sure, isn't working. But maybe you know what I want to achive. How to do this?

Answer

If you want get this kind of selector h1.icon_girl you have to use interpolation and @at-root directive to extract the current selector from root selector in which it's nested.

SASS

.icon_girl {
    background-image: url('data:image/svg+xml;charset=UTF-8, ... SVG code ...');

    @at-root h1#{&}  {
        background-size: 37px;
        padding-left: 48px;
    }

    @at-root h2#{&}  {
        background-size: 30px;
        padding-left: 38px;
    }
}

Output

.icon_girl {
  background-image: url("data:image/svg+xml;charset=UTF-8, ... SVG code ...");
}
h1.icon_girl {
  background-size: 37px;
  padding-left: 48px;
}
h2.icon_girl {
  background-size: 30px;
  padding-left: 38px;
}