¿LESS tiene una función de "extensión"?

93

SASS tiene una característica llamada @extendque permite que un selector herede las propiedades de otro selector, pero sin copiar las propiedades (como mixins).

¿LESS también tiene esta función?

css sass less extend jonschlinkert
fuente
Para aclarar, las otras referencias a preguntas NO hacen lo mismo. Esta pregunta es simple: "¿LESS tiene una función de extensión?". La otra pregunta es hacer algo que requiere mucha más reflexión con respecto a las decisiones de estilo.
jonschlinkert
... para agregar a mi último comentario, la otra pregunta incluye la etiqueta "estilo de codificación" que respalda aún más mi punto.
jonschlinkert

Respuestas:

156

Sí, Less.js introducido extenden v1.4.0 .

:extend()

En lugar de implementar la @extendsintaxis at-rule ( ) utilizada por SASS y Stylus, LESS implementó la sintaxis de pseudo-clase, que le da a la implementación de LESS la flexibilidad de ser aplicada directamente a un selector o dentro de una declaración. Entonces ambos funcionarán:

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

o 

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

Además, puede usar la alldirectiva para extender las clases "anidadas" también:

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

Y puede agregar una lista separada por comas de las clases que desea extender:

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

Al extender selectores anidados, debería notar las diferencias:

selectores anidados .selector1y selector2:

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

Ahora .selector3:extend(.selector1 .selector2){};salidas:

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

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

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

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

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

y finalmente .selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}
jonschlinkert
fuente
15
"La sintaxis de LESS es más" fiel "al CSS tradicional que la @extendsintaxis at-rule ( ) implementada por SASS y Stylus, que normalmente se reserva para dar instrucciones o directivas al analizador CSS en el navegador". <- ¿Qué diablos se supone que significa esto? Huele a hablar de marketing.
cimmanon
1
vamos a continuar esta discusión en el chat
steveax
2
@cimmanon Supongo que tienes razón, no quise sonar así. Pero hay mucha controversia sobre la sintaxis de Less, aparentemente porque la gente esperaba que Less usara la misma sintaxis que SASS. Pero en CSS, los pseuso-selectores se usan para reglas de coincidencia de patrones para determinar qué reglas de estilo se aplican a elementos en el árbol del documento, mientras que las reglas at se usan para directivas de "nivel superior" (como mencioné). Entonces, ¿quizás debería editar la respuesta para proporcionar ese detalle? O es otra pregunta: "¿Por qué LESS eligió la sintaxis del pseudo-selector?"
jonschlinkert
4
realmente debería actualizar la menor documentación en línea, no puedo ver nada sobre: ​​extend () y hubiera sido bueno saberlo antes
Joshua Bambrick
2
La documentación, al igual que el código, es mantenida por la comunidad. Sería genial tener este tipo de sugerencias en el repositorio real, y las solicitudes de extracción siempre son bienvenidas ;-)
jonschlinkert
6

Manera fácil de extender una función en Less framework

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

Salida

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

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

Spushika Mulakala
fuente