3 Nuevas características LESS de CSS que debes saber

Ha pasado un tiempo desde nuestra última discusión sobre LESS CSS. Hoy, LESS CSS ha llegado a la versión 1.5 y ha ido evolucionando con nuevas características que lo hacen más poderoso como preprocesador de CSS.

Ha habido un montón de nuevas incorporaciones, y en esta publicación vamos a guiarlo a través de 3 de mis nuevas características favoritas, Hacer referencia a archivo externo, Extender, Combinar propiedad, que pueden ayudarnos a escribir mejor CSS. Vamos a ver.

Importación de archivos

Antes que nada, echemos un vistazo a cómo MENOS CSS maneja los archivos externos con la regla @import .

Algunas personas pueden dividir su hoja de estilo en varios archivos, en lugar de ponerlo en un solo bote. Luego los importan con @import a otra hoja de estilo, para que los Mixins (así como las Variables ) de esos archivos puedan reutilizarse en ese otro archivo.

 @import "external.less"; 

El problema es que LESS compilará todos los Mixins a partir de estos archivos externos, de modo que terminaríamos con múltiples reglas de estilo que definen lo mismo.

Eche un vistazo al siguiente ejemplo: Tenemos dos archivos LESS llamados style.less y external.less . Importamos el external.less en style.less . Entonces, tenemos mixin .square en external.less para definir el estilo de los recuadros cuadrados. Dentro del style.less, usamos el mixin como tal.

 @import "externo"; .box {.square; } 

Esto producirá el siguiente resultado en CSS. Las reglas de estilo de .square mixin también se generan, lo cual no es bueno.

 .square {ancho: 100px; altura: 100px; margen: 0 auto; color de fondo: rojo; } .box {ancho: 100px; altura: 100px; margen: 0 auto; color de fondo: rojo; } 

En la versión 1.5, LESS introdujo (reference), que se puede usar para indicar a LESS que use el archivo de importación solo como referencia y que no muestre el contenido.

Coloque la instrucción (reference) esta manera:

 @import (referencia) "externo"; 

Compile la hoja de estilos LESS, y ahora .square no se .square .

 .box {ancho: 100px; altura: 100px; margen: 0 auto; color de fondo: rojo; } 

Ampliar

El método Extend es pura genialidad. Técnicamente, agrupa selectores que comparten las mismas reglas de estilo, que dan como resultado un CSS más limpio y organizado . Cuando construimos un sitio web, en algunos puntos, podríamos terminar teniendo algunos selectores con reglas de estilo muy similares, como a continuación:

 .box {ancho: 100px; altura: 100px; margen: 0 auto; borde: 1px negro sólido; color de fondo: transparente; } .box2 {ancho: 100px; altura: 100px; margen: 0 auto; borde: 1px negro sólido; color de fondo: rojo; } 

Es redundante y no sigue las mejores prácticas, que sugieren poner los mismos estilos juntos. Sass, en este caso, es conocido con su directiva @extend para hacer este trabajo, en MENOS podemos hacer algo similar con &:extend(), introducido en la versión 1.4.

Dado el ejemplo anterior, podemos hacer:

 @import (referencia) "externo"; .box {&: extender (.square); color de fondo: transparente; } .box2 {&: extender (.square); color de fondo: rojo; } 

Cuando se compila en CSS regular, el código anterior producirá:

 .square, .box, .box2 {ancho: 100px; altura: 100px; margen: 0 auto; borde: 1px negro sólido; } .box {background-color: transparent; } .box2 {color de fondo: rojo; } 

Fusionando Propiedad

Otra nueva característica interesante es Merging Property . Esta característica se aplica a la propiedad CSS que acepta múltiples valores, como transformar, transición y sombreado . Y como su nombre lo indica, fusionará valores que pertenecen a la misma propiedad. Veamos este ejemplo a continuación.

Como probablemente ya sepa, la propiedad CSS3 Box Shadow acepta múltiples valores ocultos. Al usar esta propiedad de fusión, puede crear efectos de sombra fácilmente y hacerlos más manejables.

Aquí creamos dos mixins .inner-shadow y .outer-shadow - Supongo que los nombres se explican por sí mismos.

 .inner-shadow {box-shadow +: inserción 10px 10px 5px #ccc; } .outer-shadow {box-shadow +: inserción 10px 10px 5px #ccc; } 

Tenga en cuenta que agregamos un signo + al final del nombre de la propiedad. Este signo + es requerido para que esta característica funcione. Entonces, podemos usar estas mezclas, de la siguiente manera:

 .box {.inner-shadow; sombra interior; } .box2 {.inner-shadow; } .box3 {.outer-shadow; } 

Este código nos dará el siguiente resultado.

 .box {box-shadow: inserción 10px 10px 5px #ccc, 10px 10px 5px #ccc; } .box2 {box-shadow: inserción 10px 10px 5px #ccc; } .box3 {box-shadow: 10px 10px 5px #ccc; } 

Pensamiento final

Estas 3 características nuevas - Hacer referencia a un archivo externo, Extender, Combinar propiedad - me motivaron a utilizar MENOS más. Con ellos podemos escribir mejor y CSS más manejable. Estoy esperando nuevas capacidades más geniales que LESS ofrecerá en las próximas versiones.

Obtenga ahora la experiencia de Firefox Focus en teléfonos inteligentes Android

¿Recuerda Firefox Focus, el navegador web basado en la privacidad de Mozilla? Bueno, finalmente ha dado el salto al sistema operativo Android después de hacer su debut en dispositivos con iOS .En su mayor parte, la experiencia de Firefox Focus en Android es muy similar a la que se puede encontrar en los dispositivos con iOS.

(Consejos de tecnología y diseño)

Samsung Galaxy S8: la nave insignia que podría cambiar el futuro de la compañía

En 2016, Samsung logró aterrizar en una sopa caliente debido a la falla catastrófica de la Nota 7. Considerado ampliamente como uno de los escándalos más grandes en la industria de la tecnología, la buena reputación de Samsung sufrió una paliza por las fallas de Note 7 . Ahora, con la compañía coreana lanzando oficialmente el Galaxy S8, la pregunta es la siguiente: ¿permitirá el Samsung S8 pasar del fiasco Note 7, o el S8 continuará llevando a la compañía coreana por un camino oscuro?Antes de habl

(Consejos de tecnología y diseño)