将 CSS 变量转换为 SCSS 变量

Question

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

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

\(.*?\)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 替换为美元符号和 Group 1 中的值。

演示：