📋 Extract SCSS Classes

🇺🇦 Українська версія нижче ⬇

Extension for Visual Studio Code that extracts CSS/SCSS (or indented SASS) selectors from your HTML, JSX or TSX, preserving nesting, and outputs them (clipboard, preview or file).

⚙️ Features

• Parses HTML (class="…", id="…", tags without attributes)
• Parses JSX/TSX (className="…", conditional/template expressions, map(), self-closing tags)
• Supports simple selectors (.class, #id) or full selectors (tag.class#id…)
• Configurable output syntax: scss or sass
• Output methods:
  • ask each time (QuickPick)
  • clipboard (copy silently)
  • preview (open new editor tab)
  • file (prompt to save .scss/.sass)
• Localization: English 🇺🇸 / Ukrainian 🇺🇦 based on VS Code language
• Status-bar button for one-click extraction

🖱️ How to Use

1. Open an HTML, .jsx or .tsx file in VS Code.
2. Click the SCSS Extract button in the status bar, or run the command
   Ctrl+Shift+P → Extract SCSS from HTML/JSX
3. If outputMethod = “ask”, choose:

• Copy to Clipboard
• Show Preview
• Save to File

4. Your SCSS/SASS code is generated with proper nesting.

⚙️ Configuration

Open Settings (Ctrl+,) and search for “Extract SCSS”. Available options:

💡 Example

HTML

<div>
<h1 class="a">
 <span class="b"></span>
 <p></p>
 <img/>
 <div/>
 <a href="" id="c"></a>
</h1>
</div>

Generated SCSS (with default settings):

div {
  .a {
    .b { }
    p { }
    img { }
    div { }
    #c { }
  }
}

JSX / TSX

export default function Test() {
  return (
    <div className="wrapper">
      {items.map(x => <span className="item" />)}
      <footer id="ftr"><p/></footer>
    </div>
  );
}

Produces:

div.wrapper {
  span.item { }
  #ftr {
    p { }
  }
}

Author

Created with ❤️ by [Mrhopro] And special thanks to [Mik00000]

🇺🇦 Витягування SCSS класів

Розширення для Visual Studio Code, яке витягує CSS/SCSS (або індентований SASS) селектори з HTML, JSX чи TSX, зберігає вкладеність і виводить їх (буфер, прев’ю або файл).

⚙️ Можливості

• Парсинг HTML (class="…", id="…", теги без атрибутів)
• Парсинг JSX/TSX (className="…", умовні/шаблонні вирази, map(), self-closing теги)
• Підтримка простих селекторів (.class, #id) або повних селекторів (tag.class#id…)
• Налаштовуваний синтаксис: scss або sass
• Способи виводу:
  • ask – запит щоразу (QuickPick)
  • clipboard – копіювати без запиту
  • preview – відкрити у новій вкладці
  • file – зберегти у .scss/.sass
• Локалізація: англійська/українська залежно від мови VS Code
• Кнопка в статус-барі для швидкого запуску

🚀 Використання

1. Відкрий файл HTML, .jsx або .tsx у VS Code.
2. Натисни кнопку SCSS Extract в статус-барі або виконай команду

   Ctrl+Shift+P → Extract SCSS from HTML/JSX
   

3. Якщо outputMethod = “ask”, обери:
   • Копіювати в буфер
   • Показати прев’ю
   • Зберегти у файл
4. Отримай згенерований SCSS/SASS з коректною вкладеністю.

⚙️ Налаштування

Відкрий Налаштування (Ctrl+,) та знайди “Extract SCSS”. Доступні опції:

📑 Приклади

HTML

<div>
  <h1 class="a">
    <span class="b"></span>
    <p></p>
    <img/>
    <div/>
    <a href="" id="c"></a>
  </h1>
</div>

Згенерований SCSS:

div {
  .a {
    .b { }
    p { }
    img { }
    div { }
    #c { }
  }
}

JSX / TSX

export default function Test() {
  return (
    <div className="wrapper">
      {items.map(x => <span className="item" />)}
      <footer id="ftr"><p/></footer>
    </div>
  );
}

Згенерований SCSS:

div.wrapper {
  span.item { }
  #ftr {
    p { }
  }
}

Автор

Створено з ❤️ [Mrhopro] і окрема подяка [Mik00000]