SASS：有没有办法自定义 sass 语法？

Question

我有一个像这样的 scss 函数

@function dpx($size) {
  @return calc(var(--dpx, 10px) * #{$size});
}

这样工作正常：

h1 {
  font-size: dpx(1.6);
}

但我认为它有点冗长，因为我需要在任何地方使用它，我想让这个功能更像是一个单元。

我知道 sass 是一个预编译器，我可以以某种方式将以下语法编译为 dpx(1.6) 吗？

h1 {
  font-size: 1.6dpx;
}

Answer 1

您可以使用 CSSVariables（不需要 SCSS）来集中调整字体大小

df.at["transaction_time"] = df["transaction_time"] - pd.Timedelta(seconds=4*60*60)

* {
  font-size: calc(var(--dpx, 10px) * var(--fs));
}

.a { --fs: 1; } 
.b { --fs: 2; } 
.c { --fs: 3; } 
.d { --fs: 4; }