如何使用@mixin 在 scss 中添加动态字体 shorthand 属性？

Question

@mixin title($cat-font: 12px, $line-height: 18px) {
        font: normal $cat-font/$line-height 'Open Sans', serif;
}

a.title{
  @include title();
}

如果你写 $cat-font/$line-height，斜线“/”将是除法运算符，你会在 css 中看到：

a.title{
   font: normal 0.6667 'Open Sans', serif;
}

Answer 1

这里是 scss 的字体 shorthand 的参考。 https://www.sitepoint.com/sass-basics-operators/

解决方案是

@mixin title($cat-font: 12px, $line-height: 18px) {
        font: normal #{$cat-font} / #{$line-height} 'Open Sans', serif;
}

a.title{
  @include title();
}

您将在 css 中看到的是：

a.title{
   font: normal 12px/18px 'Open Sans', serif;
}

参考：

font-size: 16px / 24px // Outputs as CSS

    font-size: (16px / 24px) // Uses parentheses, does division

    font-size: #{$base-size} / #{$line-height}; // Uses interpolation, outputs as CSS

    font-size: $base-size / $line-height // Uses variables, does division

    opacity: random(4) / 5; // Uses a function, does division

    padding-right: 2px / 4px + 3px // Uses an arithmetic expression, does division

如何使用@mixin 在 scss 中添加动态字体 shorthand 属性？

How to add dynamic font shorthand properties in scss with @mixin?

sass

scss-mixins