Responsive text-shadow SCSS - reactjs

Question

I'm trying to put a responsive text-shadow property on my titles (that gives a depth effect).
I kind of succeeded to do it with JSX variables, but it's no use since I need it to be scss only, because the font-size will be determined here. I would maybe need a scss var getter than would give the current font-size at any time.
Here's the kind of solution I'm looking for (scss):
#extend %font-something;
text-shadow: $fontSize * 1px $fontSize / 2 * 1px $fontSize / 14 * 1px #00000029;
Note that %font-something can change the font-size to any size.
Is this possible given the scss technology ?

Answer 1

Interesting topic. Yes, this is indeed possible.
You might use an one-liner:
$font-size: 16;
.foo {
text-shadow: #{$font-size * 1px} #{($font-size / 2) * 1px} #{($font-size / 14) * 1px} rgba(#000, .16);
}
Or, a solution like this:
$font-size: 16;
$offset-x: $font-size * 1px;
$offset-y: ($font-size / 2) * 1px;
$blur-radius: ($font-size / 14) * 1px;
$color: rgba(#000, .16);
$text-shadow: $offset-x $offset-y $blur-radius $color;
.bar {
text-shadow: $text-shadow;
}
Edit:
#mixin depth($font-size) {
text-shadow: #{$font-size * 1} #{($font-size / 2) * 1} #{($font-size / 14) * 1} rgba(#000, .16);
}
p {
#include depth(16px);
}