Apakah LESS memiliki fitur "perpanjang"?

93

SASS memiliki fitur bernama @extendyang memungkinkan selektor untuk mewarisi properti selektor lain, tetapi tanpa menyalin properti (seperti mixin).

Apakah LESS juga memiliki fitur ini?

css sass less extend jonschlinkert
sumber
Untuk klarifikasi, referensi pertanyaan lain TIDAK menanyakan hal yang sama. Pertanyaan ini sederhana: "Apakah LESS memiliki fitur perluasan?". Pertanyaan lainnya adalah menanyakan sesuatu yang membutuhkan lebih banyak pemikiran tentang keputusan gaya.
jonschlinkert
... untuk menambah komentar terakhir saya, pertanyaan lain termasuk tag "gaya pengkodean" yang selanjutnya mendukung maksud saya.
jonschlinkert

Jawaban:

157

Ya, Less.js diperkenalkan extenddi v1.4.0 .

:extend()

Daripada mengimplementasikan @extendsintaks at-rule ( ) yang digunakan oleh SASS dan Stylus, LESS mengimplementasikan sintaks pseudo-class, yang memberi implementasi LESS fleksibilitas untuk diterapkan baik secara langsung ke selektor itu sendiri, atau di dalam sebuah pernyataan. Jadi keduanya akan bekerja:

.sidenav:extend(.nav) {...}

atau 

.sidenav {
    &:extend(.nav);
    ...
}

Selain itu, Anda juga dapat menggunakan allperintah untuk memperluas kelas "bersarang":

.sidenav:extend(.nav all){};

Dan Anda dapat menambahkan daftar kelas yang dipisahkan koma yang ingin Anda perluas:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

Saat memperluas pemilih bersarang, Anda akan melihat perbedaannya:

pemilih bersarang .selector1dan selector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

Sekarang .selector3:extend(.selector1 .selector2){};keluaran:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

, .selector3:extend(.selector1 all){};keluaran:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

, .selector3:extend(.selector2){};keluaran

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

dan terakhir .selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}
jonschlinkert
sumber
15
"Sintaks LESS lebih" setia "pada CSS tradisional daripada @extendsintaks at-rule ( ) yang diimplementasikan oleh SASS dan Stylus, yang biasanya disediakan untuk memberikan instruksi atau arahan ke parser CSS di browser." <- apa sih maksudnya ini? Baunya seperti pembicaraan pemasaran.
cimmanon
1
mari kita lanjutkan diskusi ini dalam obrolan
steveax
2
@cimmanon Saya kira Anda benar, saya tidak bermaksud terdengar seperti itu. Tetapi ada banyak kontroversi tentang sintaks Less, tampaknya karena orang mengharapkan Less untuk menggunakan sintaks yang sama dengan SASS. Namun di CSS, pseuso-selector digunakan untuk aturan pencocokan pola untuk menentukan aturan gaya mana yang berlaku untuk elemen di pohon dokumen, sedangkan at-rules digunakan untuk arahan "tingkat yang lebih tinggi" (seperti yang saya sebutkan). Jadi mungkin saya harus mengedit jawaban untuk memberikan detail itu? Atau itu pertanyaan lain: "Mengapa LESS memilih sintaks pseudo-selector?"
jonschlinkert
4
Anda harus benar-benar memperbarui dokumentasi yang lebih sedikit secara online, saya tidak dapat melihat apa-apa tentang: extender () dan akan lebih baik untuk mengetahui sebelumnya
Joshua Bambrick
2
Dokumentasi, seperti halnya kode, dikelola oleh komunitas. Saran semacam ini akan sangat bagus untuk dimiliki pada repo yang sebenarnya, dan permintaan tarik selalu diterima ;-)
jonschlinkert
6

Cara mudah untuk memperluas fungsi di Less framework

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

Keluaran

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

Lihat https://codepen.io/sprushika/pen/MVZoGB/

Spushika Mulakala
sumber