响应式文本阴影SCSS

Question

我正试图在我的标题上放置一个响应text-shadow属性(这会产生深度效果(。

我用JSX变量成功地做到了这一点，但这没有用，因为我只需要它是scs，因为font-size将在这里确定。我可能需要一个scss-var getter，而不是在任何时候给出当前的字体大小。

以下是我正在寻找的解决方案(scs(：

@extend %font-something;  
text-shadow: $fontSize * 1px $fontSize / 2 * 1px $fontSize / 14 * 1px #00000029;

注意，%font-something可以将font-size改变为任何大小。

考虑到scss技术，这可能吗

Answer 1

有趣的主题。是的，这确实是可能的。

你可能会使用一句话：

$font-size: 16;
.foo {
text-shadow: #{$font-size * 1px} #{($font-size / 2) * 1px} #{($font-size / 14) * 1px} rgba(#000, .16);
}

或者，像这样的解决方案：

$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;
}

编辑：

@mixin depth($font-size) {
text-shadow: #{$font-size * 1} #{($font-size / 2) * 1} #{($font-size / 14) * 1} rgba(#000, .16);
}
p {
@include depth(16px);
}