catatan:

Bisakah seseorang dengan reputasi 300 menambahkan tag, "scss" ke pertanyaan ini? Saya akan sangat menghargai.

Kode saya (scss):

.cinderblock {
    @include minwidth();
    background-image:url("images/cinderblock.jpg");
    background-position:top center;
    background-color:#b79966;
    height:528px;

    .wrapper {
        background-image:url("images/home-decorito.jpg");
        height:488px;
    }
    .big-yellow-button {
        width: auto;
        position:absolute;
        bottom:84px;
    }
}

Apa yang saya butuhkan untuk terlihat seperti:

.cinderblock {
    @include minwidth();
    background-color:#b79966;
    background-image:url("images/cinderblock.jpg");
    background-position:top center;
    height:528px;

    .big-yellow-button {
        bottom:84px;
        position:absolute;
        width: auto;
    }
    .wrapper {
        background-image:url("images/home-decorito.jpg");
        height:488px;
    }
}

Solusinya harus:

Urutkan menurut abjad
- properti dari blok induk
- properti blok anak
- balok anak
Pertahankan indentasi
Bonus: Ketidakkonsistenan yang benar dalam spasi putih (mis. Ruang antara nama dan nilai properti)

vim sorting

— gmeben
sumber

Jika kami mengabaikan aspek teknis dari pertanyaan Anda, ini bukan ide yang sangat bagus. Penyeleksi harus dikelompokkan berdasarkan posisi pada halaman / di situs, urutan cascading, semantik ... penyortiran alfabet mungkin lebih buruk daripada tidak ada urutan sama sekali.

— romainl

Sebenarnya, cara terbaik untuk arsitek css adalah dengan spesifik, terutama ketika Anda bekerja di situs besar seperti saya. Coba lihat: youtube.com/watch?v=R-BX4N8egEc

— gmeben

Hmm, itulah yang saya maksud dengan "cascading oder". Urutan abjad menyebalkan.

— romainl

Menyortir properti dan pemilih anak secara alfabetis bukanlah ide yang buruk sama sekali, karena itu mengalir dengan baik dan tidak mempengaruhi spesifisitas. Tetaplah pada topik.

— gmeben

Ini mempengaruhi keterbacaan dan pemahaman yang harus menjadi perhatian utama ketika berbicara tentang pengurutan teks / kode. width: 23px; dan height: 46px; terkait secara konseptual dan karenanya harus tetap bersama, hal yang sama untuk margin dan padding atau position, top, bottom, left dan right.

— romainl

Tidak ada cara mudah / builtin untuk melakukan apa yang Anda inginkan. Anda pasti akan menggunakan :sort perintah pada satu waktu atau yang lain tetapi Anda harus datang dengan beberapa makro. Pada dasarnya, idenya adalah untuk:

letakkan semua aturan Anda sebaris
```
v%
J
(repeat)
```

sortir pemilih Anda

(select the inlined selectors)
:'<,'>sort

perluas blok aturan Anda dan membuatnya terlihat bagus
```
:s/\[{;\]/&\r
=%
```
urutkan setiap blok
```
(select the rules)
:'<,'>sort
```

Anda dapat menemukan beberapa inspirasi sana .

— romainl
sumber

Keren, aku akan segera mencoba ini

— gmeben

Saya menjadi punk pada Langkah 2. Saya memilih penyeleksi inline dan menekan jenis saya, tetapi mereka masih dalam urutan yang sama. Apakah Anda mengatakan saya perlu mengurutkan properti?

— gmeben

pada langkah 2 Anda seharusnya hanya memiliki garis yang dimulai dengan pemilih seperti .wrapper {...} atau .big-yellow-button {...}. Anda harus dapat mengurutkan semua garis dengan memilih dan melakukannya :sort tanpa mempengaruhi apa yang ada di antara kurung keriting.

— romainl

Ooh, maksudmu aku harus v% setiap blok inline secara individual. Saya melihat. Sekarang saya mendapatkan kesalahan "Pola tidak ditemukan" pada Langkah 3.

— gmeben

Lihat pertanyaan terkait untuk pola yang lebih akurat.

— romainl

Vim - Sortir Blok Bersarang SCSS

catatan:

Solusinya harus: