0

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

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

提前感谢您为我指明正确的方向。

更新：

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

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

  }
}

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

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

贾斯汀

4

2 回答 2

1

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

但是，除了替换字体系列之外，您还可以创建一个 mixin，从现在开始处理您的字体样式并在任何地方使用它，而不是像 font-family、font-size 等 css 属性......

于 2013-09-08T11:46:47.197 回答
1

使用 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 中的语法。

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

于 2013-09-10T03:35:55.860 回答