Vim - Sortir Blok Bersarang SCSS

2

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

Jawaban:

1

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:

  1. letakkan semua aturan Anda sebaris 

    v%
J
(repeat)

  2. sortir pemilih Anda 

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

  3. perluas blok aturan Anda dan membuatnya terlihat bagus 

    :s/\[{;\]/&\r
=%

  4. 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