如何使用@mixin 在scss 中添加动态字体速记属性？答案

【问题标题】：How to add dynamic font shorthand properties in scss with @mixin?如何使用@mixin 在scss 中添加动态字体速记属性？
【发布时间】：2019-08-29 11:55:42
【问题描述】：

@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;
}

【问题讨论】：

标签： sass scss-mixins

【解决方案1】：

这里是scss的字体速记参考。 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

【讨论】：