Question

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

甚至可以开发一个带有SASS的mixin，它可以为“font-size”低于固定值（如12px）的所有实例设置字体堆栈。或者有更好的方法来纠正同样的问题吗？

提前感谢我指出了正确的方向。

更新

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

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

  }
}

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

我之所以问这个问题只是因为我认为有人遇到了类似的问题，并且可能已经找到了类似的解决方案。

贾斯汀

Answer 1

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

然而，不仅仅是替换font-family，你可以创建一个mixin，从现在开始，它会处理你的字体样式并在任何地方使用它，而不是像font-family，font-size等css-properties ......

Answer 2

使用SCSS实际上非常简单，但我不确定SASS是否也可以这样做。也许这段代码可以让你走上正确的道路。 SCSS可以做数学函数，让语法正确是很棘手的。以下是使用Compass进行SCSS编译的工作代码：

@function clear-units($value){
    @if type-of($value) == "number" {
        @if (unitless($value)) {
            @return $value;
        } @else if unit($value) == "em"{
            @return $value / 1em;
        } @else if unit($value) == "px" {
            @return $value / 1px;
        } @else if unit($value) == "pt" {
            @return $value / 1pt;
        }
    } @else {
        @warn "Not a number value: #{$value}";
        @return $value;
    }
}

@function font-family-for-size($value) {
    $size: clear-units($value); 
    @if ( $size <= 12 ) {
        @return "Verdana, sans-serif"; 
    } @else {
        @return "Arial, sans-serif"; 
    }
}

.hello-twelve {
    font-size: 12px; 
    font-family: font-family-for-size( 12px ); 
}
.hello-fourteen {
    font-size: 14px; 
    font-family: font-family-for-size( 14px ); 
}

编译为：

.hello-twelve { font-size: 12px; font-family: "Verdana, sans-serif"; }
.hello-fourteen { font-size: 14px; font-family: "Arial, sans-serif"; }

希望能帮助您找出SASS中的语法。

@mixin在这里不起作用，因为它打算编译成整套样式，但@function可以用来计算一个值，这就是它在这里所做的。

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

2 个答案: