How to calculate font-size through his parent in SASS?

Question

I have several heading in my scss file:

h1{font-size:18px}
h2{font-size:16px}
h3{font-size:12px}

and in my my index.html i've got this:

<h1>Heading <span>Secondary text</span></h1>
<h2>Heading <span>Secondary text</span></h2>
<h3>Heading <span>Secondary text</span></h3>

I would like to calculate the font-size of the SPAN tag, lats say.. font-size equal minus 2px to the heading that contains him?

Answer 1

You don't need SASS for it. Just use calc. Something like:

.h3 span {
    font-size: calc(100% - 2px);
}