Czy LESS ma funkcję "extend"?

Question

Czy LESS ma funkcję "extend"?

SASS posiada funkcję o nazwie @extend, która pozwala selektorowi dziedziczyć właściwości innego selektora, ale bez kopiowania właściwości (jak mixins).

Czy LESS ma również tę funkcję?

76

css extend sass css3 less

Author: jonschlinkert, 2013-03-17

Source

2 answers

Łatwy sposób na rozszerzenie funkcji w mniej frameworku

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

Wyjście

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

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

0

Author: Spushika Mulakala,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-09 06:58:07

score 135 · Accepted Answer

Tak, Mniej.wprowadzono jsextend w v1.4.0.

:extend()

Zamiast implementować składnię at-rule (@extend) używaną przez Sass i Stylus, LESS zaimplementował składnię pseudo-klas, która daje implementacji LESS elastyczność, która może być zastosowana bezpośrednio do selektora lub wewnątrz instrukcji. Więc oba te będą działać:

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

Lub

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

Dodatkowo możesz użyć dyrektywy all, aby rozszerzyć "zagnieżdżone" klasy jako cóż:

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

I możesz dodać oddzieloną przecinkami listę klas, które chcesz rozszerzyć:

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

Podczas rozszerzania zagnieżdżonych selektorów należy zauważyć różnice:

Zagnieżdżone selektory .selector1 i selector2:

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

Teraz .selector3:extend(.selector1 .selector2){}; wyjścia:

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

, .selector3:extend(.selector1 all){}; wyjścia:

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

,.selector3:extend(.selector2){}; wyjścia

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

I wreszcie .selector3:extend(.selector2 all){};:

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