Czy LESS ma funkcję „rozszerzania”?

Question 1

SASS ma funkcję o nazwie, @extendktóra umożliwia selektorowi dziedziczenie właściwości innego selektora, ale bez kopiowania właściwości (takich jak mixins).

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

Question 2

Tak, Less.js wprowadzony extendw wersji 1.4.0 .

:extend()

Zamiast implementować @extendskładnię at-rule ( ) używaną przez SASS i Stylus, LESS zaimplementował składnię pseudoklasową, która daje implementacji LESS elastyczność do zastosowania bezpośrednio do samego selektora lub wewnątrz instrukcji. Więc oba z nich będą działać:

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

lub

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

Ponadto możesz użyć alldyrektywy, aby rozszerzyć również „zagnieżdżone” klasy:

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

Możesz dodać listę klas oddzielonych przecinkami, które chcesz rozszerzyć:

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

Przy rozszerzaniu zagnieżdżonych selektorów należy zauważyć różnice:

zagnieżdżone selektory .selector1i selector2:

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

Teraz .selector3:extend(.selector1 .selector2){};wyświetla:

.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;
}

Question 3

Łatwy sposób na rozszerzenie funkcji w Less frameworku

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

Wynik

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

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

Answer 1

94

SASS ma funkcję o nazwie, @extendktóra umożliwia selektorowi dziedziczenie właściwości innego selektora, ale bez kopiowania właściwości (takich jak mixins).

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

css sass less extend jonschlinkert
źródło

Dla wyjaśnienia, inne odniesienia do pytań NIE mówią o tym samym. Pytanie jest proste: „Czy LESS ma funkcję rozszerzania?”. Drugie pytanie dotyczy czegoś, co wymaga dużo więcej przemyślenia przy podejmowaniu decyzji dotyczących stylizacji.

jonschlinkert

... aby dodać do mojego ostatniego komentarza, drugie pytanie zawiera tag „coding-style”, który dodatkowo potwierdza mój punkt widzenia.

jonschlinkert

Answer 2

Dla wyjaśnienia, inne odniesienia do pytań NIE mówią o tym samym. Pytanie jest proste: „Czy LESS ma funkcję rozszerzania?”. Drugie pytanie dotyczy czegoś, co wymaga dużo więcej przemyślenia przy podejmowaniu decyzji dotyczących stylizacji.

jonschlinkert

Answer 3

... aby dodać do mojego ostatniego komentarza, drugie pytanie zawiera tag „coding-style”, który dodatkowo potwierdza mój punkt widzenia.

jonschlinkert

Answer 4

158

Tak, Less.js wprowadzony extendw wersji 1.4.0 .

:extend()

Zamiast implementować @extendskładnię at-rule ( ) używaną przez SASS i Stylus, LESS zaimplementował składnię pseudoklasową, która daje implementacji LESS elastyczność do zastosowania bezpośrednio do samego selektora lub wewnątrz instrukcji. Więc oba z nich będą działać:

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

lub

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

Ponadto możesz użyć alldyrektywy, aby rozszerzyć również „zagnieżdżone” klasy:

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

Możesz dodać listę klas oddzielonych przecinkami, które chcesz rozszerzyć:

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

Przy rozszerzaniu zagnieżdżonych selektorów należy zauważyć różnice:

zagnieżdżone selektory .selector1i selector2:

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

Teraz .selector3:extend(.selector1 .selector2){};wyświetla:

.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;
}

jonschlinkert
źródło

15

"Składnia LESS jest bardziej" wierna "tradycyjnemu CSS niż @extendskładnia at-rule ( ) implementowana przez SASS i Stylus, która jest zwykle zarezerwowana do wydawania instrukcji lub dyrektyw parserowi CSS w przeglądarce." <- co to do cholery ma znaczyć? Pachnie marketingiem.

cimmanon

1

niech nam kontynuować tę dyskusję w czacie

steveax

2

@cimmanon Myślę, że masz rację, nie chciałem, żeby tak brzmiało. Ale jest wiele kontrowersji dotyczących składni Lessa, najwyraźniej dlatego, że ludzie oczekiwali, że Less będzie używał tej samej składni co SASS. Ale w CSS selektory pseuso są używane do reguł dopasowywania wzorców, aby określić, które reguły stylu mają zastosowanie do elementów w drzewie dokumentu, podczas gdy reguły at są używane dla dyrektyw „wyższego poziomu” (jak wspomniałem). Więc może powinienem edytować odpowiedź, aby podać te szczegóły? A może jest to kolejne pytanie: „Dlaczego LESS wybrał składnię pseudo-selektora?”

jonschlinkert

4

naprawdę powinieneś zaktualizować mniej dokumentacji online, nie widzę nic na temat: extension () i dobrze by było wiedzieć wcześniej

Joshua Bambrick

2

Dokumentacja, podobnie jak kod, jest prowadzona przez społeczność. Tego rodzaju sugestie byłyby świetne, jeśli chodzi o rzeczywiste repozytorium, a żądania ściągnięcia są zawsze mile widziane ;-)

jonschlinkert

Answer 5

15

"Składnia LESS jest bardziej" wierna "tradycyjnemu CSS niż @extendskładnia at-rule ( ) implementowana przez SASS i Stylus, która jest zwykle zarezerwowana do wydawania instrukcji lub dyrektyw parserowi CSS w przeglądarce." <- co to do cholery ma znaczyć? Pachnie marketingiem.

cimmanon

Answer 6

1

niech nam kontynuować tę dyskusję w czacie

steveax

Answer 7

2

@cimmanon Myślę, że masz rację, nie chciałem, żeby tak brzmiało. Ale jest wiele kontrowersji dotyczących składni Lessa, najwyraźniej dlatego, że ludzie oczekiwali, że Less będzie używał tej samej składni co SASS. Ale w CSS selektory pseuso są używane do reguł dopasowywania wzorców, aby określić, które reguły stylu mają zastosowanie do elementów w drzewie dokumentu, podczas gdy reguły at są używane dla dyrektyw „wyższego poziomu” (jak wspomniałem). Więc może powinienem edytować odpowiedź, aby podać te szczegóły? A może jest to kolejne pytanie: „Dlaczego LESS wybrał składnię pseudo-selektora?”

jonschlinkert

Answer 8

4

naprawdę powinieneś zaktualizować mniej dokumentacji online, nie widzę nic na temat: extension () i dobrze by było wiedzieć wcześniej

Joshua Bambrick

Answer 9

2

Dokumentacja, podobnie jak kod, jest prowadzona przez społeczność. Tego rodzaju sugestie byłyby świetne, jeśli chodzi o rzeczywiste repozytorium, a żądania ściągnięcia są zawsze mile widziane ;-)

jonschlinkert

Answer 10

Łatwy sposób na rozszerzenie funkcji w Less frameworku

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

Wynik

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

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

Czy LESS ma funkcję „rozszerzania”?

Odpowiedzi:

Łatwy sposób na rozszerzenie funkcji w Less frameworku