Nested CSS styles ~ Di mana saya pernah melihat konsep ini sebelumnya?

Saya tidak dapat menemukan ini sekarang tetapi saya telah membacanya sebelumnya di berbagai blog yang membahas topik tersebut. Saya akan memberikan contoh dan mudah-mudahan itu jelas (meskipun mungkin tidak menjelaskan apa pun).

Mengingat markup ini (sewenang-wenang dengan sengaja):

<div class="myWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>
<div class="yourWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>

Sedangkan CSS bisa dibaca seperti ini:

.myWrapper .img img {border: thin black solid;}
.myWrapper .img {margin:10px;}
.yourWrapper .img img {border: thick red dashed;}
.yourWrapper .img {margin:20px;}

Bisa juga ditulis seperti ini:

.myWrapper {
  .img { 
    margin:10px;
    img {
        border: thin black solid;
    }
  }
}
.yourWrapper {
  .img { 
    margin:10px;
    img {
        border: thick red dashed;
    }
  }
}

Tapi saya tidak ingat melihat di mana itu dibahas atau jika ada sesuatu dalam karya. Adakah yang tahu apa yang saya bicarakan?

Dan saya tidak berpikir ini adalah pertanyaan SO atau saya akan meletakkannya di SO.

html css

— jcolebrand
sumber

<strike> Hanya catatan yang tidak akan menghasilkan gaya yang sama dengan margin sekarang akan berada pada imgelemen dalam .imgkelas. </strike>

— Josh K

@JoshK ~ Kenapa begitu? Mungkin sebenarnya saya membaca kembali barang-barang LessCSS akan menyegarkan ingatan saya, tetapi Anda tampaknya lebih cepat dari google;)

— jcolebrand

Oh, aku merindukan penutupan }. Aku akan membereskannya sekarang.

— Josh K

Ya saya meninggalkan mereka inline karena yang sebelumnya inline, saya tidak tahu apakah pesanan penting pada gaya CSS yang saya lihat, dan setelah melihat blok KURANG Anda di bawah ini saya pikir saya harus flip-flop 'mereka, tetapi meninggalkannya untuk anak cucu Sake;) ~ tapi saya tidak keberatan sunting, saya punya kekuatan rep-on pada SO: D

— jcolebrand

Jawaban:

KURANG CSS

bahasa stylesheet dinamis yang dirancang oleh Alexis Sellier. Itu dipengaruhi oleh Sass dan telah mempengaruhi sintaks "SCSS" yang lebih baru dari Sass, yang mengadaptasi sintaks pemformatan blok seperti CSS. KURANG adalah open-source. Versi pertamanya ditulis dalam Ruby, namun dalam versi selanjutnya, penggunaan Ruby telah ditinggalkan dan digantikan oleh JavaScript. Sintaks yang terindentasi dari LESS adalah bahasa logam bersarang , karena CSS yang valid adalah kode KURANG yang valid dengan semantik yang sama. KUR memberikan mekanisme berikut: variabel, bersarang, mixin, operator dan fungsi; perbedaan utama antara KURANG dan precompiler CSS lainnya adalah bahwa KURANG memungkinkan kompilasi real-time melalui LESS.

KURANG menggunakan gaya bersarang itu.

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

— Josh K.
sumber

egads kamu cepat;)

— jcolebrand

Kami MENCINTAI dotLess.

— quentin-starin

Juga: sass-lang.com

— Juan Mendes

Juga, dukungan sass dan scss bersarang.

Sass adalah ekstensi dari CSS3, menambahkan aturan tersarang, variabel, mixin, pewarisan pemilih, dan banyak lagi. Ini diterjemahkan ke CSS standar yang diformat dengan baik menggunakan alat baris perintah atau plugin kerangka kerja web.

Sass memiliki dua sintaksis. Sintaks yang paling umum digunakan dikenal sebagai "SCSS" (untuk "Sassy CSS"), dan merupakan superset dari sintaks CSS3. Ini berarti bahwa setiap stylesheet CSS3 yang valid juga SCSS yang valid. File SCSS menggunakan ekstensi .scss.

Sintaks kedua, yang lebih lama dikenal sebagai sintaks indentasi (atau hanya ".sass"). Terinspirasi oleh kesederhanaan Haml, ini dimaksudkan untuk orang yang lebih suka keringkasan daripada kesamaan dengan CSS. Alih-alih tanda kurung dan titik koma, ia menggunakan lekukan garis untuk menentukan blok ...

— Mladen Jablanović
sumber