Smart CSS Sorter

A lightweight, intelligent VS Code extension to sort CSS, SCSS, Sass, and Less properties alphabetically.

Unlike basic sorters, Smart CSS Sorter understands the structure of your code. It sorts properties while preserving the order of nested blocks, media queries, mixins, and comments.

✨ Features

• Alphabetical Sorting: Sorts properties from A to Z.
• Smart Nesting Support: Perfectly handles nested rules in SCSS/Less without breaking logic.
• Structure Preservation: Keeps @extend, @include, and variables grouped logically.
• Zero Config: Works out of the box.

🚀 How to use

1. Open any .css, .scss, .sass, or .less file.
2. Right-Click anywhere in the editor.
3. Select "Sort CSS/SCSS Properties".

💡 Example

Before

.card {
    z-index: 10;
    display: flex;
    
    .title {
        color: red;
        font-size: 16px;
    }

    background: white;
    width: 100%;
}

After (Sorted)

.card {
    background: white;
    display: flex;
    width: 100%;
    z-index: 10;
    
    .title {
        color: red;
        font-size: 16px;
    }
}

Notice how properties are sorted and moved to the top, while the .title block remains safely at the bottom.

📦 Installation

Install via the Visual Studio Code Marketplace or by installing the .vsix file manually.