Pertanyaan Apakah KURANG memiliki fitur "memperpanjang"?


SASS memiliki fitur yang disebut @extend yang memungkinkan pemilih untuk mewarisi sifat pemilih lain, tetapi tanpa menyalin properti (seperti mixin).

Apakah KURANG memiliki fitur ini juga?


75
2018-03-17 19:07


asal


Jawaban:


Ya, Less.js diperkenalkan extend di v1.4.0.

:extend()

Daripada menerapkan at-rule (@extend) Sintaks yang digunakan oleh SASS dan Stylus, KURANG menerapkan sintaks pseudo-class, yang memberikan implementasi LESS fleksibilitas untuk diterapkan baik langsung ke pemilih itu sendiri, atau di dalam pernyataan. Jadi keduanya akan berfungsi:

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

atau

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

Selain itu, Anda dapat menggunakan all direktif untuk memperluas kelas "bertingkat" juga:

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

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

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

Saat memperluas pemilih bertingkat, Anda harus memperhatikan perbedaannya:

nested selectors .selector1 dan selector2:

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

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

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

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

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

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

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

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

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

135
2018-03-17 19:07



Cara mudah untuk memperluas fungsi dalam kerangka Kurang

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


0
2018-04-09 06:38