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

标签 css fonts sass compass-sass

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

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

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

更新:

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

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

  }
}

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

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

贾斯汀

最佳答案

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

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

关于css - 使用 SASS 为所有小于固定大小的文本设置字体堆栈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18650008/

相关文章:

CSS3 列定位问题

node.js - ionic - 错误 : Cannot find module 'gulp-sass'

html - 字体在浏览器中呈现不统一

html - 从最后一个 span 元素中移除::after 伪元素的内容

html - 伪元素过渡后的水平 li 元素

html - 标题与表中链接的垂直对齐

css - 动画 Sprite 表

html - 在同一个基础行中将图像和导航一起居中?

html - 由于某种原因未显示 Font Awesome 图标

css - 第三方字体集成 Ruby on Rails 不工作路径正常,命名正确,控制台或服务器编译无错误