在 scss 中创建具有多个属性的 font-variables 的最佳实践是什么？

Question

我正在为我的 Liferay 7 项目创建一个带有 scss 的 variables 文件，因为我将有多种不同的文本样式，我想知道什么会是最好的写法吗？以下值只是示例。

Text type	Font	Size	Weight	Other properties
Title 1	Arial	1.5rem	700
Title 2	Calibri	1.25rem	500	#FF0000
Body	Courier	1rem	400
Link	Arial	1rem	400	underline

我应该将其格式化得尽可能清晰和长，还是应该尝试将它们放在一行中，或者介于两者之间？我觉得越短越好，但是是不是太局促了，看不懂，需要修改吗？

示例 1：

$title1FontFamily: "Arial";
$title2FontFamily: "Calibri";
$bodyFontFamily: "Courier";
$linkFontFamily: "Arial";

$title1FontSize: 1.5rem
$title2FontSize: 1.25rem
$bodyFontSize: 1rem // not really necessary, if base
$linkFontSize: 1rem // not really necessary, if base

// ...

.title1 {
  font-family: $title1FontFamily;
  font-size: $title1FontSize;
  // ...
}

// or

.title2 {
  font: $title2FontFamily $title2FontSize;
}

示例 2：

$title1Font: Arial 1.5rem 700;
$title2Font: Calibri 1.25rem 500 #FF0000;
$bodyFont: Courier 1rem 400;
$linkFont: Arial 1rem 400 underline;

.title1 {
  font: $title1Font;
}

Answer 1

你可以看看@extend。

.font-one { 
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.2em;
}

只要调用 class @extend .font-one，基本上就可以创建项目并共享样式。这里有更多信息：https://sass-lang.com/documentation/at-rules/extend

在 scss 中创建具有多个属性的 font-variables 的最佳实践是什么？

What's the best practice in creating font-variables with multiple properties in scss?

css

sass

liferay