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.