es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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.

Google Panda: 5 consejos que debes saber

Google Panda: 5 consejos que debes saber

Esta aquí. Es inevitable. Se llama Google Panda, el último algoritmo de búsqueda de Google que tiene como objetivo promover el sitio de contenido de alta calidad al condenar el rango de sitios de contenido de baja calidad. Desde su lanzamiento y actualizaciones, muchos sitios han sido terriblemente afectados por el algoritmo, pero el peor rumor es que no pueden hacer casi nada para recuperar el ranking y el tráfico.Aun

(Consejos de tecnología y diseño)

15 ideas de regalo de bolsillo para ayudar a difundir el amor de Navidad

15 ideas de regalo de bolsillo para ayudar a difundir el amor de Navidad

Probablemente haya verificado la mayoría de las ideas de regalos disponibles, pero si no le gustan los obsequios voluminosos que podrían hacer un agujero en su bolsillo, entonces revise las opciones de bolsillo que tenemos para usted en esta publicación. Encontrará lindas cámaras pequeñas, diseños creativos de unidades de memoria USB, copias de seguridad de baterías portátiles, un rastreador de actividades, una billetera delgada e incluso una máquina de café espresso con alimentación manual.Nota: Algun

(Consejos de tecnología y diseño)