将 CSS 变量转换为 SCSS 变量

Question

我正在将所有 css 文件更改为 scss。但是，我需要将所有样式文件的 css 变量转换为 scss 变量。

有没有办法可以做到这一点，而无需进入每个文件并使用查找和替换？我正在使用 VS 代码，因为正在考虑使用查找并替换为正则表达式表达式。但我无法让它发挥作用。

\(.*?\)i

例如转换

// css 
.blog {
  box-shadow: var(--lightShadow);
  transition: var(--mainTransition);
}

进入

// scss
.blog {
  box-shadow: $lightShadow;
  transition: $mainTransition;
}

Answer 1

您可以使用

查找内容：（      \bvar\(--(\w+)\)或\bvar\(--([^()]+)\)）
替换为：$$$1

细节

• \b- 字边界
• var\(---var(--细绳
• (\w+)- 第 1 组：1+ 个字母、数字或下划线（匹配 1+ 个除 和[^()]+以外的字符）()
• \)- 一个)字符。

替换$$$1为美元符号和第 1 组内的值。

演示：