How to calculate font size through its parent in SASS?

Question

I have several headers in my scss file:

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

and in my my index.html I have 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 header that contains it?

Answer 1

You do not need SASS. Just use calc. Sort of:

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