css - 使用 SASS 为所有小于固定大小的文本设置字体堆栈

Question

我继承了一个包含多种字体大小的遗留 CSS 的网站。理想情况下，我想为字体大小低于 12px 的情况设置特定的字体堆栈，但我不需要更改大小。

是否有可能使用 SASS 开发一个 mixin，为所有“字体大小”低于固定值(如 12px)的实例设置字体堆栈。或者是否有更好的方法来纠正同样的问题？

预先感谢您为我指明正确的方向。

更新:

阅读文档时，我所看到的最接近我所描述的是使用 @if 语句，但我不相信你可以评估像“font-size”这样的属性是否实际上小于固定大小，如“10px”，假设像素是正在使用的单位。

p {
  @if $type == ocean {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;

  }
}

SASS 文档还提到“请注意，控制指令是一项高级功能，不建议在日常样式设计过程中使用。”

我问这个问题只是因为我假设有人遇到过类似的问题并且可能找到了类似的解决方案。

贾斯汀

Answer 1

你想要的根本不可能。您无法避免使用旧的搜索和替换。

但是，您可以创建一个 mixin，而不是仅仅替换 font-family，从现在开始负责您的字体样式并在任何地方使用它，而不是 css-properties，如 font-family、font-size 等...