如何在VSCode中创建支持动态变量的CSS/SCSS自定义代码片段？

Hey there! Let's get that VS Code snippet working exactly how you want it. The key here is using VS Code's built-in variable transformations to capture the number you type after ffz and plug it into the final CSS code.

Step 1: Open Your User Snippets File #

First, navigate to your user snippets for CSS/SCSS:

• Go to File > Preferences > User Snippets
• Select css.json (or scss.json if you only want this snippet to work in SCSS files)

Step 2: Add the Working Snippet #

Replace any existing content (or append this) to the file:

"Font Size Variable (ffzXX)": {
  "scope": "css, scss",
  "prefix": "ffz",
  "body": [
    "font-size: var(--fz${TM_CURRENT_LINE/ffz(\\d+)/$1/})"
  ],
  "description": "Generate font-size using --fzXX variable when typing ffzXX"
}

How It Works #

Let's break down the magic parts:

• prefix: "ffz": This tells VS Code to trigger the snippet whenever you type text starting with ffz (like ffz15).
• The regex transformation: ${TM_CURRENT_LINE/ffz(\\d+)/$1/} does three things:
  1. TM_CURRENT_LINE grabs the entire line you're typing on.
  2. The regex ffz(\\d+) captures the numerical value immediately following ffz.
  3. $1 inserts that captured number into the --fzXX variable name.

Using the Snippet #

• Type ffz15 (or any number after ffz) in your CSS/SCSS file.
• Press Tab to trigger the snippet.
• It will instantly replace ffz15 with font-size: var(--fz15).

Bonus: Add px to the Variable Name #

If you want the variable to include px (like your pseudocode showed: --fz15px), just tweak the body line to this:

"font-size: var(--fz${TM_CURRENT_LINE/ffz(\\d+)/$1/}px)"

内容的提问来源于stack exchange，提问作者rozhnovds