在 SCSS 中更快地编写 CSS 变量

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

更新（2022年10月20日）：虽然这个辅助工具依然很棒，但我决定只在个人项目中使用。与IDE自动补全相比，它带来的好处可能不足以抵消额外抽象带来的认知负担。

我喜欢CSS 变量（原因如下），但它的语法对我来说不太易读：

• 名字里有个双连字符：--varName;
• var需要使用该函数才能访问它： color: var(--myColor);。

太疯狂了。我们来简化一下……

功能v()！

@function v($var) {
  @return var(--#{$var});
}

• Codepen 上的演示
• NPM 包！

用法

首先，像往常一样定义 CSS 变量：

:root {
  --primary: #000;
  --bg: #fff;
}

然后，将其与……一起使用v(varName)。

html {
  background: v(bg);
  color: v(primary);
}

它会生成以下内容：

html {
  background: var(--bg);
  color: var(--primary);
}

虽然只省了 4 个字符，但对于提高可读性来说非常棒，而且你会经常用到它。

就是这样！

可选的第二个参数作为备用参数

正如评论中提到的那样var()，CSS函数可以接受一个备用值作为第二个参数：如果所需的 CSS 变量未定义或具有浏览器可理解的值，则将使用此默认值。

所以，让我们v()相应地更新一下：

@function v($var, $fallback: null) {
  @if($fallback) {
    @return var(--#{$var}, #{$fallback});
  } @else {
    @return var(--#{$var});
  }
}

现在，让我们编写一些可以利用可选回退机制的功能，例如“将视频固定在角落”功能：

一点小小的乐趣

你知道这--是一个有效的 CSS 自定义属性名称吗？可惜的是，在 SCSS 中声明和使用它比较麻烦。不过，这个v()辅助函数可以让你的工作轻松一些。✌️

其他一些尝试本来可能很棒，但是……

如果您想知道如何改进我的软件包，我已将三次失败的尝试整理到一个 Gist 中。欢迎提出关于 CSS 变量的建议！