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

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 字体简写的参考。 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