Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>scss-variables-hintsNew to Visual Studio Code? Get it now.
scss-variables-hints

scss-variables-hints

ayou

|
29 installs
| (0) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

css-variable-hints

css 变量提示插件,通过输入- 或 #触发。

功能

  1. 以#触发仅提示十六进制符号的颜色值 比如:--danger-color: #f53f3f;;
  2. 以-触发的会提示出所有css变量。

变量文件需遵循的规则:目标文件里的变量必须用 :root{} 或 :export{}包括。

Demo

Be sure that you have one of supported language modes selected in right bottom of your vscode window:

  • css
  • postcss
  • scss
  • less
  • vue

Extension Configuration

在项目的.vscode/settings.json文件中配置css变量文件的路径数组,如下所示: Minimal configuration file:

{
  ...
  // 本地资源变量文件路径配置规则 以`**`开始和结尾。
  "cssVarriablesHints.files": [
    "**/node_modules/@hatech/theme/lib/**",
    "**/src/theme/**"
  ],
  ...
};

用法:

  1. 搜索插件名:css-variables-hints, 并安装。
  2. 修改项目根目录下的.vscode/settings.json:
{
  ...
  // 本地资源变量文件路径列表
  "cssVarriablesHints.files": [
    "**/node_modules/@hatech/theme/lib/**",
    "**/src/theme/**"
  ],
  ...
};
  1. 在vue文件中写样式的时候,通过-或#触发提示,如果没有提示,(1)重启编辑器试下,(2)检查下.vscode/settings.json配置是否不正确。
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft