KURANG - Perpanjang

Extend adalah kelas semu LESS yang memperluas gaya selektor lain dalam satu selektor dengan menggunakan :extend pemilih.

Contoh

Contoh berikut menunjukkan penggunaan extends di file LESS -

extends_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

Selanjutnya, buat file style.less .

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Anda dapat mengkompilasi extend.less file extend.css dengan menggunakan perintah berikut -

lessc style.less style.css

Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Keluaran

Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -

  • Simpan kode html di atas di file extend_syntax.htm mengajukan.

  • Buka file HTML ini di browser, output berikut akan ditampilkan.

Perpanjang Sintaks

Perpanjang ditempatkan ke seperangkat aturan atau dilampirkan ke pemilih. Ini mirip dengan kelas semu yang berisi satu atau lebih kelas, yang dipisahkan dengan koma. Menggunakan kata kunci opsionalall, setiap selektor dapat diikuti.

Contoh

Contoh berikut menunjukkan penggunaan sintaks perluasan di file LESS -

extends_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

Sekarang buat file style.less .

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -

lessc style.less style.css

Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

Keluaran

Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -

  • Simpan kode html di atas di file extend_syntax.htm mengajukan.

  • Buka file HTML ini di browser, output berikut akan ditampilkan.

Tabel berikut mencantumkan semua jenis sintaks perluasan yang dapat Anda gunakan di LESS -

Sr.No. Jenis & Deskripsi
1 Perpanjang Terlampir ke Selector

Perpanjang terhubung ke selektor yang terlihat mirip dengan kelas semu dengan selektor sebagai parameter.

2 Perluas Inside Ruleset

Itu &:extend(selector) sintaks dapat diletakkan di dalam tubuh kumpulan aturan.

3 Memperluas Pemilih Bersarang

Pemilih bersarang dicocokkan menggunakan pemilih perluasan .

4 Pencocokan Persis dengan Perpanjang

Secara default, extend mencari kecocokan persis di antara penyeleksi.

5 Ekspresi ke-n

Bentuk ekspresi ke-n penting jika tidak, ia memperlakukan selektor sebagai berbeda.

6 Perpanjang "semua"

Ketika kata kunci semuanya diidentifikasi pada akhirnya diextend argumen kemudian LESS cocok dengan pemilih itu sebagai bagian dari pemilih lain.

7 Interpolasi Selektor dengan Perpanjang

Itu extend dapat dihubungkan ke pemilih interpolasi.

8 Scoping / Perluas di dalam @media

Perluas hanya cocok dengan selektor yang ada di dalam deklarasi media yang sama.

9 Deteksi Duplikasi

Itu tidak dapat mendeteksi duplikasi pemilih.

Berikut adalah jenis Use Case untuk Perpanjang

Sr.No. Jenis & Deskripsi
1 Kasus Penggunaan Klasik

Kasus penggunaan klasik digunakan untuk menghindari penambahan kelas dasar di LESS.

2 Mengurangi Ukuran CSS

Perpanjang digunakan untuk memindahkan pemilih sejauh properti yang ingin Anda gunakan; ini membantu dalam mengurangi kode yang dihasilkan css.

3 Menggabungkan Gaya / Mixin yang Lebih Canggih

Dengan menggunakan perpanjangan kita dapat menggabungkan gaya yang sama dari selektor tertentu ke selektor lainnya.