如何用Vim高效将CSS rule转换为CSS custom property？

Great question! Converting existing CSS rules to custom properties (variables) in Vim absolutely can be done efficiently—even for multi-line scenarios. Let’s break down a few targeted approaches to minimize keystrokes, since you already have a basic grasp of Vim.

First, let’s set a concrete example to work with. Suppose we have this CSS:

.button {
  background-color: #ff4444;
  color: white;
}

.card {
  background-color: #ff4444;
  border-color: #cccccc;
}

We want to convert it to use custom properties in a :root block, like this:

:root {
  --button-bg: #ff4444;
  --text-white: white;
  --card-border: #cccccc;
}

.button {
  background-color: var(--button-bg);
  color: var(--text-white);
}

.card {
  background-color: var(--button-bg);
  border-color: var(--card-border);
}

1. Multi-Line Find-and-Replace with Substitute #

Vim’s :substitute command handles multi-line patterns when you use regex flags and range shortcuts. Here’s how to streamline the conversion:

Step 1: Convert property-value pairs to custom properties (in :root) #

First, yank the lines you want to move to :root (use yy for single lines, or V to select multiple lines then y). Paste them into your :root block, then run this substitute command on those lines:

:s/\v^(\s*)([a-z-]+):\s*(.+);/\1--\2: \3;/g

• \v enables "very magic" regex (fewer backslashes, easier to read)
• ^(\s*) captures leading whitespace to preserve formatting
• ([a-z-]+) grabs the property name (like background-color)
• :\s*(.+); captures the value (like #ff4444)
• The replacement turns it into a custom property: --background-color: #ff4444;

Step 2: Replace original rules with var(--...) #

Go back to your original CSS blocks, select the range you want to update (use [m to jump to the start of a block, ]m to jump to the end), then run:

:[m,]m s/\v^(\s*)([a-z-]+):\s*(.+);/\1\2: var(--\2);/g

• [m,]m targets all lines in the current code block
• The replacement swaps the original value with var(--property-name)

2. Macros for Repetitive Conversions #

If you have dozens of property-value pairs to convert, macros are your best friend—record one full conversion, then replay it with a single keystroke.

Here’s how to set it up:

1. Move your cursor to the start of a property-value line (e.g., background-color: #ff4444;)
2. Press qq to start recording into register q
3. Run these steps (each keystroke is recorded):
   • Yank the line: yy
   • Jump to the :root block (use /{:root<CR> to search, then j to move inside)
   • Paste the line: p
   • Convert to a custom property: :s/\v^(\s*)([a-z-]+):\s*(.+);/\1--\2: \3;/<CR>
   • Jump back to the original line: <C-o> (this takes you to your last cursor position)
   • Replace with var(--...): :s/\v^(\s*)([a-z-]+):\s*(.+);/\1\2: var(--\2);/<CR>
   • Move to the next property line: j
4. Press q to stop recording
5. Replay the macro with @q—repeat as needed with @@ (repeats the last macro)

3. Batch Processing with the Global Command #

If you want to collect all property-value pairs first and replace them in one go, use Vim’s :g (global) command:

1. First, add a :root block at the top of your file if you don’t have one:

   ggO:root {<CR>}<Esc>k
   

   • gg jumps to the top, O opens a new line above, then we type the block and jump back inside with k

2. Run this global command to collect all property lines and replace originals:

   :g/\v^\s*[a-z-]+:\s*.+;/yank A | s/\v^(\s*)([a-z-]+):\s*(.+);/\1\2: var(--\2);/
   

   • :g/pattern/ runs commands on every line matching the property-value pattern
   • yank A appends the line to the default register (so all lines are collected)
   • The substitute command replaces the original line with var(--...)

3. Go to the :root block, paste the collected lines with p, then run the custom property conversion substitute command on those lines (as in Step 1 above).

Pro Keystroke-Saving Tips #

• Use \v (very magic) regex everywhere—it cuts down on backslashes and makes your commands shorter.
• Memorize range shortcuts: % for the entire file, [m/]m for code blocks, '</'> for the last visual selection.
• Use <C-r> in command mode to insert register contents—for example, if you yank a property name, insert it into a substitute command with <C-r>".
• Save frequently used substitutions as abbreviations or in your .vimrc for even faster access.

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