如何使 vscode 格式的 SCSS calc 功能正常
How to make vscode format SCSS calc function properly
我有一个包含 calc() 函数的 SCSS 文件。
当我使用像 calc(var(--primary-color-h)+5) 这样运算符周围没有空格的计算函数时，转译的 CSS 结果不起作用。只有当我在运算符周围设置空格时它才起作用；像这样 calc(var(--primary-color-h) + 5)
我将如何指示 VSCODE 在保存时在运算符周围创建空间。
我安装了 prettier、scss Formatter 和 StyleLint。但似乎都没有解决它。
谢谢，
RDG
您可以使用 Stylelint 和以下两个规则：
这些将分别标记 + 运算符前后缺少 space。参见 this demo。
此规则已在 SCSS standard config 上启用，您可以在 Stylelint 配置对象中对其进行扩展：
{
"extends": "stylelint-config-standard-scss"
}
How would i instruct VSCODE to created spaces around the operator upon save
可以使用editor.codeActionsOnSave option from the official Visual Studio Code extension for Stylelint。以及您的 VS 代码设置文件的以下内容：
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
我有一个包含 calc() 函数的 SCSS 文件。
当我使用像 calc(var(--primary-color-h)+5) 这样运算符周围没有空格的计算函数时，转译的 CSS 结果不起作用。只有当我在运算符周围设置空格时它才起作用；像这样 calc(var(--primary-color-h) + 5)
我将如何指示 VSCODE 在保存时在运算符周围创建空间。
我安装了 prettier、scss Formatter 和 StyleLint。但似乎都没有解决它。
谢谢，
RDG
您可以使用 Stylelint 和以下两个规则：
这些将分别标记 + 运算符前后缺少 space。参见 this demo。
此规则已在 SCSS standard config 上启用，您可以在 Stylelint 配置对象中对其进行扩展：
{
"extends": "stylelint-config-standard-scss"
}
How would i instruct VSCODE to created spaces around the operator upon save
可以使用editor.codeActionsOnSave option from the official Visual Studio Code extension for Stylelint。以及您的 VS 代码设置文件的以下内容：
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}