CODEWITHSUNDEEP
csssass
sdvnksv
sdvnksv

Reputation: 9668

Is there any way in SASS to nest a tag inside its selector?

Below is a code I have: 

.page-header {
    font-family: 'Roboto', sans-serif;
    color: #333;
}

Now I want to set the font size of the header depending on the tag (h1, h2, h3, etc.). Below is what I currently do it like:

h1.page-header {
    font-size: 56px;
}
h2.page-header {
   font-size: 38px;
}

Is there any way to nest it something like:

.page-header {
    color: #333;

    h1 {
        font-size: 56px;
    }
}

(I know this won't work as I expect it, just to give you an idea of what I want).

Upvotes: 1

Views: 171

Answers (1)

hungerstar
hungerstar

Reputation: 21685

Use @at-root with interpolation #{} using ampersand & to reference the current selector.

.page-header {
  @at-root h1#{&} {
    font-size: 56px;
  }
  @at-root h2#{&} {
    font-size: 38px;
  }
}

Will produce:

h1.page-header {
  font-size: 56px;
}
h2.page-header {
  font-size: 38px;
}

Upvotes: 2

Related Questions