如何在VSCode中精准选择CSS类大括号内含特定关键词的代码行并拆分至对应SCSS文件

Great question—let’s fix those false regex matches and get your CSS cleanly split into _layout.scss, _colorscheme.scss, and _type.scss without accidentally picking up keywords from class names.

The Core Problem with Your Original Regex #

Your initial regex matches any occurrence of the keyword in the entire line, including class names like .margin-text-class (where "margin" is part of the selector, not an attribute). We need to narrow the match to only look for keywords inside the curly braces { }—where actual CSS properties live.

Solution: Targeted Regex for Each SCSS Partial #

We’ll build regex patterns that first lock onto the content inside curly braces, then check for your target properties. This ensures we only match lines where the property is actually declared, not just mentioned in a selector.

1. Layout Properties (_layout.scss) #

Use this regex to match lines (single or multi-line) with layout-related properties inside curly braces:

^.*\{(?s).*?(radius|width|box-shadow|padding|margin|display:|height:).*?\}$

• ^.*\{: Matches from the start of the line up to the opening { (the selector section)
• (?s): Enables "single-line mode" so . matches newlines (works for multi-line CSS blocks)
• .*?(radius|width|box-shadow|padding|margin|display:|height:): Non-greedily matches up to your target layout properties
• .*?\}$: Matches the rest of the content inside the braces until the closing }

2. Typography Properties (_type.scss) #

For font, line-height, and letter-spacing properties:

^.*\{(?s).*?(font|line-height|letter-spacing).*?\}$

3. Color Properties (_colorscheme.scss) #

For color, background-color, and rgba values:

^.*\{(?s).*?(color:|background-color|rgba).*?\}$

How to Use These in VS Code #

1. Open your long CSS file
2. Open the Find panel (Ctrl+F / Cmd+F)
3. Click the .* icon to enable regex mode
4. Paste the regex for the partial you want to extract
5. Click "Find All" to see all matching lines (verify they’re correct!)
6. Use Ctrl+A to select all matching results, copy them, and paste into the corresponding SCSS partial
7. Repeat for each partial type

Quick Tips for Accuracy #

• Test first: Always use "Find All" to confirm matches before copying—this avoids accidental misplacement of code
• Handle nested braces: If your CSS has nested blocks (like media queries), you may need to adjust the regex or process nested rules separately
• Single-line CSS only: If all your CSS is written in single lines (e.g., .class { margin: 1rem; color: #fff; }), you can simplify the regex by removing (?s):

  ^.*\{[^}]*?(TARGET_KEYWORDS)[^}]*\}$
  

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