Pregunta ¿LESS tiene una función de "extender"?


SASS tiene una función llamada @extend que permite que un selector herede las propiedades de otro selector, pero sin copiar las propiedades (como mixins).

¿MENOS tiene esta característica también?


75
2018-03-17 19:07


origen


Respuestas:


Sí, se introdujo Less.js extend en v1.4.0.

:extend()

En lugar de implementar la regla at (@extend) Sintaxis utilizada por SASS y Stylus, LESS implementó la sintaxis de pseudoclase, lo 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, puedes usar el all directiva para extender clases "anidadas" también:

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

Y puede agregar una lista de clases separadas por comas que desee ampliar:

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

Al extender selectores anidados, debe observar las diferencias:

selectores anidados .selector1 y selector2:

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

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

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

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

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

135
2018-03-17 19:07



Una forma sencilla de extender una función en Menos marco

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

Salida

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

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


0
2018-04-09 06:38