How can I set all heading elements to font-family but alter each font-size individually with SCSS?-CodePudding

So I'm trying to learn Sass and include it in a practice/concept project to get better experience with it. But as I'm rather new (and I can't seem to find this question anywhere else, might just be my wording though) I can't seem to figure out this out. I want to set my h1-h4 elements to the same font-family but I want to alter each heading to a specific font size. Is there a way within SCSS to do this more efficiently than just doing it similar to plain CSS like:

h1,
h2,
h3,
h4 {
  font-family: Barlow Condensed', sans-serif;
}

h1 {
  font-size: 150px;
}

etc..

Is there a way to nest within that first selector or something or will it just need to be done that way? Thank you for the help!

CodePudding user response：

You can add a parent element lets say

<div>
    <h1>header 1</h1>
    <h2>header 2</h2>
</div>

and then use sass

div {
    font-family: Barlow Condensed', sans-serif;
    h1 {
        font-size: 150px;
    }
}

etc.

CodePudding user response：

No, the one you're doing is the only way of it. SCSS mainly helps to avoid manually writing nested selectors, setting repetitive values, or styles etc. It can't intervene selectors themselves. Like getting the h then nesting 1,2,3,4,5,6 in it, no, it is not possible.