Hogar › Tarifas › Idioma menos. Mixins paramétricos sin parámetros. Variables dentro de variables

Idioma menos. Mixins paramétricos sin parámetros. Variables dentro de variables

CSS es poderoso y idioma interesante estilo de página. Es rápido y comprensible, pero lo más importante es que la versión mínima es compatible con absolutamente todos los navegadores, ya sean pequeños dispositivos móviles o televisores enormes.

Sin embargo, a pesar de todas sus indudables ventajas, CSS tiene algunas, ni siquiera desventajas, sino limitaciones. Estas limitaciones no son críticas, pero pueden extender significativamente el tiempo de desarrollo del proyecto.

¿Qué restricciones podrían ser estas? Por ejemplo, color. Si vemos una entrada como #FF9F94, entonces es imposible establecer de inmediato que significa un color melocotón oscuro. Es mucho más fácil crear una variable, por ejemplo darkPeach, asignarle el valor #FF9F94 y luego usar esta variable en la hoja de estilo. Qué ventajas puede aportar esto: no es necesario recordar el código de color para indicarlo en otro lugar; para cambiar un color en toda la tabla, sólo es necesario cambiar el valor de la variable.

En otras palabras, a CSS le falta un poco de programación y lógica para que trabajar con él sea más práctico. Es bueno que existan varias herramientas para esto, incluido LESS.

¿Qué es MENOS?

LESS es un lenguaje de estilo dinámico, una especie de complemento de CSS que agrega un determinado conjunto de propiedades dinámicas a CSS: variables, mixins, operaciones, funciones, etc.

LESS es un script que se puede utilizar tanto en el lado del cliente (la tabla CSS se calcula en el navegador del usuario) como en el lateral. Sin embargo, existen mejores formas de utilizar LESS, como precompilar la tabla. En este caso, puedes obtener mesa estándar estilos que serán utilizados correctamente por el navegador y no requerirán una conversión constante nuevamente.

variables

Las variables en LESS funcionan exactamente igual que en otros lenguajes de programación. Usted crea una variable, le asigna un valor y luego puede usarla en cualquier regla CSS. Por ejemplo:

@serif-fuente: Georgia; h1, h2, h3, h4 (familia de fuentes: @serif-font;).texto grande (familia de fuentes: @serif-font;)

En este caso, la variable @serif-font almacena el nombre de la fuente. Si necesita cambiar la fuente Georgia a Times New Roman, simplemente cambie el valor de la variable y el valor de la fuente cambiará en todo el documento. Es aún más conveniente utilizar variables con códigos de color. Por ejemplo, el siguiente fragmento de CSS

Cuerpo (color: #ff9900; color de fondo:#cccccc;) p (color: #ff9900;) h1 (color: #ff9900;)

se puede sustituir por lo siguiente:

@color-naranja: #ff9900; @color-gris: #cccccc; cuerpo (color: @color-naranja; color de fondo: @color-gris;) p (color: @color-naranja;) h1 (color: @color-naranja;)

Como puede ver, todo lo que necesita hacer es corregir los colores en el encabezado de su documento CSS para corregirlos en todo el documento.

Las variables tienen alcances. Dentro de cada regla, puede reasignar el valor de una variable para esa regla. En el siguiente ejemplo, el color del enlace será blanco y el color de fondo del botón será gris:

@color: #sssss; un botón ( @color: #ffffff; color:@color;) ( fondo: @color;)

Es importante tener en cuenta que las variables en LESS están bastante más cerca de las constantes, ya que es imposible reasignarlas más adelante en el código, sólo dentro de ciertas reglas.

Operaciones

LESS le permite utilizar operaciones dentro de reglas, lo que le permite lograr un control preciso sobre los valores:

Botón( @unit: 3px; borde:@unit solid #ddd; relleno: @unit * 3; margen: @unit * 2; )

Como puede ver en el código anterior, la variable @unit está configurada en 3px. Se sustituye en el valor del ancho del borde. Las sangrías se obtienen multiplicando este valor por 3 o 2.

Todas las operaciones aritméticas se pueden utilizar en MENOS. Como operandos pueden actuar no sólo los valores numéricos, sino también los colores. Realice la llamada mezcla de colores. Si deseas cambiar el valor de un color, puedes hacerlo mezclando o restando otro color:

Botón (fondo: #941f1f + #222222; borde: #941f1f - #111111;)

La operación en segundo plano anterior aumentará cada valor HEX en 2. El resultado será #B64141, una versión más clara del color original. La operación de borde reducirá cada valor HEX en 1 y producirá un color más oscuro: #830E0E. En la práctica, hay muchos casos en los que partimos de un color base y necesitamos una versión ligeramente oscurecida o aclarada del mismo.

trabajando con color

Hay otras posibilidades para trabajar con el color. Puede aclarar, oscurecer, saturar, desaturar y rotar colores. Esto se logra mediante el uso de funciones de color.

Para ver ejemplos de uso y mostrar resultados, consulte la siguiente tabla:

@color: #3d82d1; .left_box (fondo:aclarar(@color, 20%); ) .right_box (fondo:oscurecer(@color, 20%); )
@color: #3d82d1;.left_box (fondo: desaturar(@color, 18%); ) .middle_box (fondo: @color; ) .right_box (fondo: saturar(@color, 18%); )
@color: #3d82d1;.left_box (fondo: spin(@color, 25%); ) .middle_box (fondo: @color; ) .right_box (fondo: spin(@color, -25%); )

Cada color en LESS se convierte a HSL (tono, saturación, luminosidad) para brindarle control sobre los niveles de los canales. Esto le permite manipular los colores de forma más sutil, así como obtener información del color directamente:

@color = #167e8a; matiz (@color); saturación(@color); luminosidad(@color);

¿Para qué es esto? Es difícil para una persona normal reconocer qué color está cifrado con un código HEX, pero LESS no trabaja con el código en sí, sino con el tono que establece. Digamos que encuentras un color morado que te gusta (#e147d4). Pero ahora necesitas un tono más cremoso, entonces el siguiente diseño de dos funciones te ayudará:

@color: #c480bd; .class (color de fondo: desaturar(giro(@color, 18), 12%);)

Anidación

Una de las principales ventajas de CSS es la capacidad en cascada de actualizar sus estilos. Es decir, para establecer el estilo de un párrafo dentro del contenedor del artículo, es necesario utilizar el código:

Artículo p (…)

Y eso es bueno, pero ¿qué pasa si necesitas establecer más estilos para los elementos dentro de este bloque? Luego tendrás que agregar .article constantemente antes de comenzar a definir la regla. LESS le permite anidar estilos entre sí, simplificando así la escritura de código:

A ( color:rojo; ) p ( margen:0px; ) artículo ( a ( color: verde; ) p ( color: #555; a ( color:azul; ) ) )

La sangría es opcional, pero mejora la legibilidad del código. Los niveles de anidación no están limitados.

mezclas

Para crear un marco con esquinas superiores redondeadas, deberá utilizar el siguiente código:

Y este fragmento de código debe reescribirse cada vez que sea necesario realizar dicho redondeo. Esto se puede simplificar usando MENOS. Para hacer esto necesitas crear una mezcla. Mira el ejemplo:

Parte superior redondeada ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; radio-superior-izquierdo del borde: 6px; radio-superior-derecho-del-borde: 6px;

En este caso, creamos y definimos una clase de cima redondeada y luego importamos todas sus reglas a clase superior. Y todos los estilos de la clase superior se importan a la clase de envío, incluidas las reglas para el fondo y el color del texto.

Si normalmente utiliza el mismo radio de borde pero a veces necesita uno diferente, debe establecer la fusión en un valor estándar.

Parte superior redondeada(@radius:6px) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius (fondo: #333; color:#fff; .redondeado - arriba; ) .submit ( .redondeado-top(3px); )

En este caso, la clase de pestaña usará un valor de 6px y la clase de envío usará un valor de 3px. Puede haber múltiples parámetros.

En conclusión, cabe señalar que a pesar del valor de LESS, como ocurre con cualquier otra tecnología, siempre se debe utilizar con prudencia y no se debe abusar de ella en situaciones en las que es más conveniente utilizar CSS normal. Sin embargo, en situaciones en las que MENOS sea apropiado, se convertirá en una herramienta indispensable y útil.

una visión menos apocalíptica del futuro

Visiones no tan pesimistas sobre el futuro.

Una herencia justa no es menos agradable que una esposa justa.

Una buena herencia no es menos placentera que una bella esposa. ☰

El tráfico es uno de los aspectos menos agradables de vida en la ciudad.

Los atascos son uno de los aspectos menos agradables de la vida urbana. ☰

El contorno se volvió cada vez menos nítido a medida que la luz se desvanecía.

Los contornos se volvieron cada vez menos claros, mientras que la luz se desvanecía gradualmente. ☰

La comunidad exige un estilo policial menos agresivo.

La comunidad exige un estilo menos agresivo de aplicación de la ley. ☰

Coma menos y haga más ejercicio si quiere vivir hasta una edad avanzada.

Coma menos y haga más ejercicio si quiere vivir hasta una edad avanzada. ☰

La vista trasera del hotel era incluso menos atractiva que la frontal.

Desde atrás este hotel parecía incluso menos atractivo que desde el frente. ☰

Nada menos que una luminaria como Wilhelm Furtwangler dirigió el estreno.

El director de orquesta del estreno fue nada menos que el famoso Wilhelm Furtwängler. ☰

El sistema está fallando de manera más desastrosa entre los niños menos académicos.

Este sistema es absolutamente inadecuado para niños que no tienen ganas de estudiar. ☰

"¿Podrías venir conmigo?" Fue menos una petición que una orden.

Ven conmigo, por favor. - No fue tanto una petición como una orden. ☰

A medida que pasaban los años, parecía importarle cada vez menos su reputación.

Con el tiempo, empezó a parecer que le importaba cada vez menos su propia reputación. ☰

Al estreno asistió nada menos que el propio presidente.

Al estreno ni siquiera asistió nadie, sino el propio presidente, en persona. ☰

Las personas que pueden ejercer cierto control sobre su entorno se sienten menos ansiosas.

Una persona que puede ejercer cierto control sobre su entorno se siente menos ansiosa. ☰

Las personas extrovertidas son más animadas y menos ansiosas por las situaciones sociales.

Las personas sociables son más alegres y menos preocupadas por los problemas sociales. ☰

Cuando perdió su apariencia (=se volvió menos atractiva) le resultó difícil conseguir trabajo.

A medida que perdió su apariencia (es decir, se volvió menos atractiva), le resultó muy difícil conseguir un trabajo. ☰

Las encuestas muestran que los votantes están cada vez menos contentos con la administración actual.

Las encuestas muestran que los votantes están cada vez más descontentos con la administración actual. ☰

Ella no podría importarme menos *.

Me importa un bledo lo que creas. *

Me importa un comino lo que pienses. ☰

Osa Menor

¡Menos de tu salsa, niña!

¡Menos insolencia, hija mía! ☰

De dos males elige el menor.

De dos males elige el menor. (último) ☰

Se vende toda la carne menos el hueso.

Toda la carne se vende sin huesos. ☰

Camina menos de lo que debería.

No me gusta CSS. Es simple y claro. Ésta es la fuerza impulsora de Internet, pero es demasiado limitada y difícil de gestionar. Es hora de ordenar este lenguaje y hacerlo más útil usando CSS dinámico usando MENOS.
Explicaré mi posición con un ejemplo. En lugar de usar #FF9F94 para obtener un color melocotón oscuro, ¿por qué no simplemente almacenar el valor de ese color en una variable para usarlo más adelante? Para recolorear el sitio bastará con cambiar el valor de la variable en un solo lugar y listo.
En otras palabras: será muy bueno si usamos un poco de codificación y lógica en CSS para hacerlo más poderosa herramienta. Lo bueno es que todo esto es posible usando MENOS.

¿Qué es MENOS? MENOS es un superconjunto de CSS. Esto significa que cualquier código CSS es MENOS válido, pero elementos adicionales MENOS no funcionará en CSS simple. Esto es fantástico porque el CSS existente ya es MENOS código válido, lo que reduce la barrera de entrada a la nueva tecnología.
LESS agrega muchas propiedades dinámicas útiles a CSS. Introduce variables, operaciones, elementos similares a funciones y mixins. Ser capaz de escribir hojas de estilo de forma modular le ahorrará muchos problemas. Cómo utilizar LESS Hay dos formas de utilizar LESS. Puedes crear un archivo MENOS y convertirlo cuando ayuda javascript sobre la marcha o compílelo con antelación y utilice el archivo CSS resultante. No tengas miedo de la palabra "compilar" (la uso todo el tiempo), es muy simple. Usa MENOS y. archivo javascript Primero, debe descargar un archivo Javascript del sitio web de LESS y vincularlo a la página como cualquier otro script js.

Luego crearemos un archivo con la extensión .less y lo vincularemos usando el siguiente código:

Asegúrese de adjuntar el archivo MENOS antes del JS.
Ahora el archivo MENOS funcionará como CSS normal.

Compilando un archivo MENOS Aunque este método es un poco más tedioso, a veces es preferible. Para no convertir el código cada vez que se carga la página, puede utilizar el archivo CSS resultante. Convertidores: para Windows - Winless y LESS.app para Mac Aprovechando el poder de LESS Finalmente, divirtámonos un poco: escriba MENOS código. Como verás, el código es muy fácil de leer y entender, ya que utiliza una sintaxis similar a CSS. Variables Las variables en LESS funcionan de la misma manera que en PHP, JS y la mayoría de los otros lenguajes de programación. Puede usarlos para almacenar un valor y luego usar variables en lugar del valor en sí cuando lo necesite.

@ fuente de encabezado: Georgia; h1, h2, h3, h4 (familia de fuentes: @header-font; ) .large (familia de fuentes:@header-font; )
En el ejemplo anterior, declaramos la variable @header-font y le escribimos el valor "Georgia". Ahora podemos usar esta variable siempre que queramos instalar la fuente Georgia. Si decidimos que Trebuchet MS es más adecuado para nuestros encabezados, entonces no necesitaremos revisar todo el archivo, simplemente cambiaremos el valor de la variable.
He encontrado un gran uso para las variables al definir los colores del sitio. En los viejos tiempos (que no fueron hace mucho tiempo) usaba algo como esto:

/* Colores para mi sitio web #ff9900 - Naranja - usado para enlaces y elementos resaltados #cccccc - Gris claro - usado para bordes #333333 - Negro oscuro - Usado para fondos oscuros y color de texto de encabezado #454545 - Negro medio - Usado para texto general color */ cuerpo (fondo: #333333; color: #454545; ) a ( color:#ff9900; ) h1, h2, h3, h4, h5, h6 ( color: #333333; )
No hay nada malo en documentar tus colores de esta manera, es buena practica, el problema es que la documentación no tiene nada que ver con la funcionalidad de tus estilos. Si decide cambiar los colores después de la línea 2000 del código y luego cambia de opinión en la línea 3567, será extremadamente difícil corregir todos los colores y la documentación.
Con LESS podemos modificar y documentar nuestro flujo de trabajo al mismo tiempo.

/* Colores para mi sitio web */ @color-orange: #ff9900; @color-gris_claro: #cccccc; @color-negro_dark: #333333; @color-negro_medio: #454545; cuerpo ( fondo: @color-black_dark; color: @color-black_medium; ) a ( color:@color-orange; ) h1, h2, h3, h4, h5, h6 ( color: @color-black_dark; )

Alcance de la variable El alcance de la variable describe los lugares donde son accesibles. Si define una variable al principio del archivo LESS, estará disponible para cualquier código escrito después.
También puedes definir una variable dentro de una regla CSS. En este caso, las variables no estarán disponibles fuera de esta regla; se podrán utilizar localmente.

Un botón ( @color: #ff9900; color:@color; ) ( fondo: @color; )
En este ejemplo, MENOS no se convertirá debido a que el color del error no está definido para su uso dentro de un elemento de botón. Si una variable se declara fuera de un elemento y dentro de otro elemento, solo será accesible localmente.

@color: #222222; un botón ( @color: #ffffff; color:@color; ) ( fondo: @color; )
Aquí el enlace será de color blanco y el botón tendrá un fondo negro.

Variables en Variables Si ha codificado en PHP, entonces sabe que puede declarar el nombre de una variable en otra variable.

@color-navidad_rojo: #941f1f; @nombre-del-color: "color-navidad_rojo"; color: @@nombre-del-color;
Personalmente, no uso esto mucho ya que las variables dentro de variables son casi inútiles sin cierres, pero estoy seguro de que habrá ejemplos inteligentes de cómo usar esto.

Constantes y variables Es importante tener en cuenta que, al contrario de lo que acabas de leer, las variables en LESS se parecen más a constantes. Esto significa que, a diferencia de las variables, sólo se pueden definir una vez. Operaciones Puede lograr un control increíblemente preciso utilizando operaciones en LESS. La idea es simple:

Botón( @unit: 3px; borde:@unit solid #ddd; relleno: @unit * 3; margen: @unit * 2; )
El código anterior establece la variable unitaria en 3px. Luego establecemos este valor en el ancho del borde, el relleno en tres veces este ancho y el margen en el doble de este ancho.
Puedes utilizar operaciones de multiplicación, división, suma y resta. Para crear un bloque con un borde que aumenta el ancho de los lados en el sentido de las agujas del reloj, puedes usar el siguiente código:

Caja( @base_unit: 1px; borde: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 )

Gestión del color Mi característica favorita de LESS es la gestión del color. Puede utilizar operaciones para mezclar colores y múltiples funciones especiales para trabajar con operaciones de color Si desea cambiar el valor de un color, puede hacerlo restando o sumando otro color.

@color: #941f1f; botón (fondo: #941f1f + #222222; borde: #941f1f - #111111;)
La operación en segundo plano anterior aumentará cada valor HEX en 2. El resultado será "B64141", una versión más clara del color original. La operación de borde reducirá cada valor HEX en 1 y producirá un color más oscuro: “830E0E”.
En la práctica, hay muchos casos en los que partimos de un color base y necesitamos una versión ligeramente oscurecida o aclarada del mismo.

@botón de color: #d24444; input.submit ( color:#fff; fondo:@color-button; borde:1px sólido @color-button - #222; relleno:5px 12px; )
Este código crea un botón rojo con un borde ligeramente oscuro. Esta es una situación común e identificar un solo color es de gran ayuda.

El poder de las variables es más obvio a continuación. Si desea cambiar el color del botón, cambiar el valor @color-button a verde no solo cambiará el color de fondo, sino que también cambiará el trazo a una versión más oscura de verde.

Otro gran uso de esto es la creación de degradados. Normalmente elijo un color medio y declaro el degradado en base a eso. Hago el comienzo un poco más claro y el final un poco más oscuro. El resultado será una bonita transición, algo como esto:

@color: #faa51a; .button (fondo: -webkit-gradient(lineal, arriba izquierda, abajo izquierda, desde(@color + #151515), hasta(@color - #151515)); fondo: -moz-linear-gradient(arriba, @color + #151515, @color - #151515)

Funciones de color Hay muchas más posibilidades para trabajar con color; LESS te permite manipularlos a nivel de enlace. Puede aclarar, oscurecer, saturar, desaturar y rotar colores. Echa un vistazo a los siguientes ejemplos con imágenes para entender qué hace cada uno.

@color: #3d82d1; .left_box (fondo:aclarar(@color, 20%); ) .right_box (fondo:oscurecer(@color, 20%); )

@color: #3d82d1;.left_box (fondo: desaturar(@color, 18%); ) .middle_box (fondo: @color; ) .right_box (fondo: saturar(@color, 18%); )

@color: #3d82d1;.left_box (fondo: spin(@color, 25%); ) .middle_box (fondo: @color; ) .right_box (fondo: spin(@color, -25%); )

Extracción de información de color Cada color en LESS se convierte a HSL (tono, saturación, luminosidad) para brindarle control sobre los niveles del canal. Esto permite manipular los colores de forma más sutil y obtener información sobre el color directamente.

@color = #167e8a; matiz (@color); saturación(@color); luminosidad(@color);
Esto puede parecer demasiado detallado: ¿por qué necesitamos esta información cuando simplemente podemos ingresar el valor HEX? Si eres una persona normal, no podrás descifrar el color HEX de inmediato. Los valores HEX representan el espectro RGB: los dos primeros caracteres controlan la cantidad de rojo, los dos siguientes controlan la cantidad de verde y los dos últimos controlan la cantidad de azul.
Es bastante obvio que #ff0000 es rojo, ya que es RGB(255,0,0). Tonos de rojo, nada de verde o azul. Sin embargo, si ve #1f6b2d, será difícil decodificar que es de color verde oscuro. En la notación HSL, el tono controla todo, puedes simplemente nombrar el color y el resto simplemente establecerá el tono (no del todo cierto, pero así es como funciona).
Con eso en mente, si encuentras un buen color morado como #e147d4, podrás encontrar muy fácilmente varios colores exactamente con el mismo tono. Digamos que quieres crear una versión cremosa y más pastel de #e147d4, esto es lo que puedes hacer:

El nuevo color tendrá el mismo tono, pero diferente saturación y brillo. El resultado será #c480bf, al que es mucho más difícil llegar desde #e147d4 usando solo HEX.

La combinación de funciones MENOS le permite usar funciones dentro de funciones, por lo que si desea desaturar y girar un color, simplemente puede hacer esto:

@color: #c480bd; .class (color de fondo: desaturar(giro(@color, 18), 12%);)

Anidamiento Al escribir CSS, utilizamos estilos en cascada. Para cambiar los márgenes de un párrafo sólo dentro de un artículo, puedes utilizar el siguiente código:

Artículo.post p( margen: 0 0 12px 0; )
No hay nada de malo en este enfoque, pero si también necesitamos cambiar el estilo de los enlaces, citas, encabezados, etc. Solo dentro de un artículo, necesitarás usar el prefijo “article.post” para cada elemento. Esto hace que escribir código sea más aburrido y más difícil de leer.
En MENOS podemos anidar estas reglas, dándonos una versión más corta y lógica de nuestros estilos. Por ejemplo:

Article.post ( p( margen: 0 0 12px 0; ) a ( color: rojo; ) a:hover ( color: azul; ) img ( float:left; ) )
No se requiere sangría, pero hace que el código sea más legible. Los niveles de anidación no están limitados.

A ( color:rojo; ) p ( margen:0px; ) artículo ( a ( color: verde; ) p ( color: #555; a ( color:azul; ) ) )

Mixins Mixins en LESS le evita escribir código innecesario. ¿Alguna vez has tenido que crear marco redondeado¿En el que sólo se redondean las esquinas superiores?

Tabulador ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; radio del borde superior izquierdo: 6 px; radio del borde superior derecho: 6 px)
Y así cada vez... Con MENOS, todo esto se puede cambiar creando un mixin. Las impurezas son elementos reutilizables que, por regla general, se pueden añadir a cualquier elemento. Y ni siquiera necesitas aprender una nueva sintaxis.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; radio-superior-izquierdo del borde: 6px; radio-superior-derecho-del-borde: 6px; ) .tab (fondo: #333; color:#fff; .rounded_top; ) .submit ( .rounded_top; )
En el código anterior, hemos definido un elemento .rounded_top para redondear las esquinas superiores. Cuando lo agregamos a cualquier otro elemento como un mixin (ver .tab), esencialmente estamos importando las reglas que creamos para él. Gracias a esta sintaxis podemos utilizar cualquier elemento como mixin.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; borde-arriba-radio-izquierdo: 6px; borde-arriba-radio-derecho: 6px; ) .tab (fondo: #333; color:#fff; .rounded_top; ) .submit ( .tab; fondo: rojo; )
Los estilos para el elemento .submit son esquinas redondeadas en la parte superior, blanco y fondo rojo (valor #333 anulado).

Mixins con parámetros Mixins con parámetros, suena complicado, solucionan muy bien el problema de una manera sencilla. En los ejemplos anteriores viste cómo podemos definir un elemento con un radio de 6px en esquinas superiores. ¿Qué pasa si queremos crear un elemento con un radio de 3px? ¿Deberíamos declarar mixins diferentes para todos los valores de píxeles? Por supuesto que la respuesta es no, ¡debemos usar mixins con parámetros!
Son similares a las funciones porque pueden cambiar los valores cuando se llaman. Reescribamos el ejemplo con border-radius para ver cómo funciona.

Rounded_top(@radius) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border -radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius (fondo: #333; color:#fff; .rounded_top(6px); ) .enviar ( .rounded_top(3px); )
En el código anterior, el radio del elemento .tab es 6px y el elemento .submit tendrá un valor de 3px.

Valores estándar Si normalmente usa el mismo radio de borde, pero a veces necesita uno diferente, debe darle al mixin un valor estándar.

Rounded_top(@radius:6px) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz -border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius (fondo: #333; color:#fff; .rounded_top; ). enviar ( .rounded_top(3px); )
En este ejemplo, .tab obtendrá el valor predeterminado de 6px y .submit obtendrá el valor predeterminado de 3px.

Múltiples parámetros También puede utilizar múltiples parámetros para identificar impurezas más complejas.

Radio(@radius:6px) ( -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; ) .button(@radius:3px, @fondo: #e7ba64, @padding: 4px) ( .radius(@radius); fondo:@fondo; borde: 1px sólido @fondo - #222; relleno: @padding; ) .read_more ( .button(0px); )
En este ejemplo, class.read_more está formateado con un relleno de 4px, un color de fondo de #e7ba64 y un radio de borde de 0px.

Usar todos los argumentos a la vez Otra opción a la hora de utilizar argumentos es combinarlos. Las propiedades taquigráficas en CSS tienen varios valores escritos uno tras otro.

Div (borde:1px sólido #bbb;)
para preguntarle a todos elementos necesarios borde gris, puedes usar una función como esta:

Gray_border(@ancho: 1px, @tipo: sólido, @color: #bbb)( borde:@argumentos; ) div ( .gray_border(2px, discontinuo); )
@arguments es una palabra clave especial que muestra todos los parámetros uno por uno en un orden determinado. El resultado del código MENOS anterior será:

Div (borde:2px discontinuo #bbb; )

Impurezas paramétricas sin parámetros También puedes usar mixins paramétricos sin parámetros. Esto se usa cuando no necesita generar un mixin en CSS, pero desea que sus reglas se apliquen al elemento en el que se usa.

Alerta (fondo: rojo; color: blanco; relleno:5px 12px; ) .error_message ( .alert; margen: 0 0 12px 0; )
El CSS del código anterior será así:

Alerta (fondo: rojo; color: blanco; relleno:5px 12px; ) .error_message (fondo: rojo; color: blanco; relleno:5px 12px; margen: 0 0 12px 0; )
Para ocultar la clase .alert, debe configurar el parámetro en vacío.

Alert() (fondo: rojo; color: blanco; relleno:5px 12px; ) .error_message ( .alert; margen: 0 0 12px 0; )
El CSS terminado se verá así:

Error_message (fondo: rojo; color: blanco; relleno:5px 12px; margen: 0 0 12px 0; )
Esto se utiliza principalmente para reducir Tamaño CSS archivo.

Espacio de nombres El espacio de nombres en los lenguajes de programación se suele utilizar para agrupar elementos de funcionalidad similar. Podemos lograr algo similar en LESS combinando nuestro código con mixins.

#my_framework ( p ( margen: 12px 0; ) a ( color: azul; decoración de texto: ninguno; ) .submit ( fondo: rojo; color: blanco; relleno: 5px 12px; ) )
Al comenzar a trabajar en un nuevo sitio basado en su marco, puede agregar el enlace #my_framework y usarlo sin obstruir el espacio de nombres.

Botón_enviar ( #mi_marco > .enviar; )
También esto gran manera permiten cambiar y perfeccionar rápidamente los temas. Si está desarrollando varios temas para su empresa, para cambiar las plantillas sobre la marcha, puede colocarlas todas en un archivo MENOS usando paquetes.

#fw_1 ( p ( margen: 12px 0; ) a ( color:azul; decoración de texto: ninguno; ) .submit ( fondo: rojo; color: blanco; relleno:5px 12px; ) ) #fw_2 ( p ( margen: 8px 0; ) a ( color: rojo; decoración de texto: subrayado; ) .submit ( fondo: azul; color: blanco; relleno:8px 20px; ) .submit_button ( #fw_2 > .submit; )

Interpolación de cadenas La interpolación de cadenas es otra palabra elegante que significa que esta cadena arbitraria puede almacenarse en una variable y luego usarse en un valor de propiedad.

@url: "http://miempresa.com/assets/";imagen de fondo: url("@(url)/sprite.png");
Esto puede resultar útil al crear un marco centralizado.

Escapar A veces es necesario utilizar propiedades o valores que no son CSS válidos (reglas IE). Quizás hayas notado que en el ejemplo sobre gradientes no me preocupé por los usuarios de Internet Explorer.
Si deseas crear un degradado en IE, debes hacer algo como esto:

Filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444");
Este CSS no es válido, por lo que LESS no se compilará. En este caso, puedes escapar de este valor, lo que permitirá que LESS lo omita.

Botón (fondo: -webkit-gradient(lineal, arriba izquierda, abajo izquierda, desde(#666666), hasta(#444444)); fondo: -moz-linear-gradient(arriba, #666666, @color - #444444) ; filtro: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444"";)
Todo lo que tienes que hacer es poner comillas alrededor de la sección y poner una tilde delante. Esta sección no pasará por el procesador LESS y no será descartada.

Importar Al igual que con CSS normal, puedes importar archivos. LESS le permite importar CSS y LESS usando la siguiente sintaxis:

@importar "reset.min.css"; @import "framework.less"; @importar "widgets";
La primera importación es bastante obvia. Importa las reglas CSS definidas en reset.min.css sin ser procesadas por el analizador LESS.
La segunda importación insertará el contenido de framework.less y lo tratará como cualquier otra regla MENOS.
La tercera importación funciona igual que la segunda. Si la extensión no está instalada, el preprocesador lo considera un archivo MENOS.

Comentarios Naturalmente, comentarios multilínea están disponibles en MENOS en la misma forma que en CSS. LESS también permite el uso de comentarios de una sola línea como en PHP o Javascript, utilizando barras invertidas dobles.

/* Este es mi archivo LESS principal.

¿Qué falta? Aunque LESS es sorprendente, todavía existen algunas deficiencias cuando comienzas a usarlo, aunque no son muy perturbadoras.
Una de las características que me gustaría ver es el preprocesamiento (estoy de acuerdo, parece inútil). ¿Recuerda cómo se pueden escapar las cadenas para que no pasen por el analizador? El método actual no permite el uso de degradados con colores cambiables.

Filtro: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#faa51a", endColorstr="#f47a20"");
Este código funciona muy bien, pero los colores deben estar estrictamente definidos. Si se escapa la línea, las variables no se procesan. Sería bueno tener una opción donde las variables en cadenas con escape se procesen antes de enviarse al archivo CSS.

Conclusión Como con cualquier nueva tecnología o se está abusando del método. ¿Recuerda los logotipos reflectantes y los botones de cristal en los albores de la era Web 2.0?
No es necesario anidar todas las reglas, no es necesario crear variables para todo o un mixin solo para el ancho del marco.
Si no sabe cuándo no utilizar el increíble poder de LESS, su código LESS se volverá tan ilegible como el CSS normal e igual de difícil de mantener. El truco consiste en saber cuándo utilizar estas funciones y técnicas, y cuándo es mejor el CSS antiguo.
Además, desaconsejo utilizar un archivo MENOS. No hay nada de malo en eso, pero no hay razón para cargar un archivo MENOS y procesarlo. Sin duda el script es muy rápido, pero estoy seguro de que sin él será más rápido. Normalmente desarrollo todos mis sitios con MENOS, tomo el archivo de salida, lo comprimo y uso un archivo CSS normal.

CSS: simple y herramienta accesible. Sin embargo, tiene sus limitaciones, especialmente cuando surge la cuestión del soporte. código listo. Cuando necesitas modificar miles de líneas de estilo repartidas en varios archivos, la tarea se convierte en un desafío.

Para superar este problema, se han creado preprocesadores CSS que permiten combinar estilos de forma dinámica. Hay varias opciones (como LESS y SASS), pero en esta lección veremos MENOS.

MENOS Editor

Al momento de escribir este tutorial, solo había un editor completamente dedicado a trabajar con MENOS archivos: ChrunchApp. Esta aplicación multiplataforma, construido sobre Adobe Air, se puede ejecutar en Windows, Mac OSX y Linux.

Para otros editores (como Dreamweaver, Coda, NotePad++ y SublimeText 2) existen complementos o complementos que le permiten proporcionar MENOS resaltado de sintaxis.

Usando MENOS

MENOS es muy fácil de usar. Sólo necesitas agregar dos líneas a etiqueta de cabeza su documento HTML. La primera línea contiene el nombre de su archivo .less y la segunda línea contiene la conexión de la biblioteca less.js (se puede descargar desde el sitio web oficial).

En nuestra lección mostraremos otra forma. Usaremos el compilador LESS: para Windows podemos usar WinLess y para Mac OSX podemos usar LESS.app.

Cree un archivo .less en el directorio de trabajo. Luego abra el compilador (WinLESS o LESS.app) e importe el directorio de trabajo en él. el compilador encontrará todos los archivos .less. Eso es todo. Ahora, cada vez que cambiemos el archivo .less, el compilador generará automáticamente código CSS normal en un archivo .css que sea aceptado por el navegador.

Todo lo que queda es vincular el archivo CSS al documento HTML:

MENOS sintaxis

A diferencia del CSS normal, LESS se parece más a un lenguaje de programación. Es dinámico, por lo que es lógico esperar que utilice variables, operaciones y alcance.

variables

Veamos primero las variables.

Al trabajar con CSS, probablemente te hayas encontrado con una situación en la que se establece un valor repetido en varios bloques a lo largo de una hoja de estilo.

Class1 (color de fondo: #2d5e8b; ) .class2 (color de fondo: #fff; color: #2d5e8b; ) .class3 ( borde: 1px sólido #2d5e8b; )

Todo va genial hasta que tienes que examinar 1000 secciones idénticas de código en toda la hoja de estilo para cambiar el valor. Esta situación puede surgir cuando se trabaja en un proyecto grande.

Cuando se utiliza el preprocesador LESS, este problema se resuelve fácilmente utilizando variables. Las variables le permiten almacenar valores que pueden reutilizarse en una hoja de estilo.

@color-base: #2d5e8b; .class1 (color de fondo: @color-base; ) .class2 (color de fondo: #fff; color: @color-base; ) .class3 ( borde: 1px sólido @color-base; )

En el ejemplo anterior, la variable @color-base almacena el valor #2d5e8b. Y cuando necesites cambiar el color, solo necesitarás cambiar el valor en la variable.

Puedes usar otros valores en la variable:

@font-family: Georgia @dot-border: punteado @transition: lineal @opacity: 0.5

Ingredientes

En LESS, puedes usar mixins para almacenar un conjunto de reglas y aplicarlas a otros conjuntos. Por ejemplo:

Degradados (fondo: #eaeaea; fondo: gradiente lineal (arriba, #eaeaea, #cccccc); fondo: -o-linear-gradient (arriba, #eaeaea, #cccccc); fondo: -ms-linear-gradient (arriba , #eaeaea, #cccccc); fondo: -moz-linear-gradient(arriba, #eaeaea, #cccccc);

En el ejemplo anterior, configuramos el color del degradado en la clase .gradients. Luego, cuando necesites agregar un degradado, solo necesitas insertar .gradients como este:

Cuadro ( .gradients; borde: 1px sólido #555; radio del borde: 3px; )

La clase .box hereda todas las declaraciones de .gradients. Por lo tanto, la expresión MENOS anterior es equivalente al siguiente código CSS normal:

Cuadro ( fondo: #eaeaea; fondo: gradiente lineal (arriba, #eaeaea, #cccccc); fondo: -o-linear-gradient (arriba, #eaeaea, #cccccc); fondo: -ms-linear-gradient (arriba , #eaeaea, #cccccc); fondo: -moz-linear-gradient(arriba, #eaeaea, #cccccc); fondo: -webkit-linear-gradient(arriba, #eaeaea, #cccccc); )

Cuando trabaje con CSS3, puede utilizar la biblioteca LESS ELements para facilitar su trabajo. LESS Elements es una colección de mixins CSS3 comunes que se usan a menudo en el estilo, como border-radius, gradientes, drop-shadow, etc.

Para usar LESS solo necesita agregar la regla @import al archivo LESS. Sólo necesita descargar la biblioteca y colocarla en su directorio de trabajo.

@import "elementos.less";

Ahora puedes usar todas las clases de elements.less. Por ejemplo, para agregar un radio de esquina de borde de 3px a elemento div, necesitas escribir:

Div ( .redondeado(3px); )

reglas anidadas

Cuando se trabaja con código CSS normal, la siguiente estructura de código es bastante común:

Nav (alto: 40px; ancho: 100%; fondo: #455868; borde inferior: 2px sólido #283744; ) nav li (ancho: 600px; alto: 40px; ) nav li a (color: #fff; alto de línea : 40px; sombra de texto: 1px 1px 0px #283744;

En el código CSS normal, seleccionamos hijos especificando un padre en cada conjunto de reglas.

En LESS, puedes mejorar el conjunto de reglas anterior anidando elementos secundarios dentro de un elemento principal:

Nav (alto: 40px; ancho: 100%; fondo: #455868; borde inferior: 2px sólido #283744; li (ancho: 600px; alto: 40px; a (color: #fff; alto de línea: 40px; texto- sombra: 1px 1px 0px #283744;

También puede utilizar pseudoclases, por ejemplo: hover, utilizando el carácter comercial (&). Digamos que queremos agregar :hover a la etiqueta del enlace:

A (color: #fff; altura de línea: 40px; sombra de texto: 1px 1px 0px #283744; &:hover (color de fondo: #000; color: #fff;))

Operaciones

También puedes utilizar operaciones en MENOS. Están disponibles suma, resta, multiplicación y división.

Digamos que el elemento B es dos veces más alto que el elemento A:

@altura: 100px .element-A (altura: @altura; ) .element-B (altura: @altura * 2; )

Primero definimos la variable @height y la asignamos para indicar la altura del elemento A.

En el elemento B, simplemente multiplicamos el valor de la variable por 2. Ahora, cuando cambiamos el valor de la variable @height, el elemento B siempre tendrá el doble de alto.

Alcance

MENOS utiliza el concepto de alcance. Primero se utilizan las variables del contexto local y, si no están allí, se realiza una búsqueda en un ámbito más amplio.

Encabezado ( @color: negro; color de fondo: @color; nav ( @color: azul; color de fondo: @color; a ( color: @color; ) ) )

en lo anterior encabezado de ejemplo tiene una variable de color con el valor black , pero el fondo del elemento de navegación será azul ya que la variable @color está en el contexto local.

Conclusión

En las próximas lecciones de la serie veremos un ejemplo. uso real LESS y algunos aspectos útiles del conjunto de herramientas.

Hoy en día, no saber qué son los preprocesadores CSS probablemente sea un fenómeno vergonzoso para un diseñador web. Pero durante mucho tiempo no quise profundizar en cómo configurarlo y utilizarlo. Me pareció que era más rápido escribir CSS a la antigua usanza que sentarse y profundizar en algo nuevo (especialmente teniendo en cuenta que la fecha límite siempre está cerca). Pero últimamente cada vez más más proyectos, incluso dificultad media han terminado con usando menos o descaro.

Por lo tanto, me gustaría presentarles brevemente, por así decirlo, cómo trabajar con el preprocesador LESS CSS. ¿Por qué lo elegí para empezar? Porque su sintaxis es la misma que la del CSS normal. LESS es un complemento de CSS, y si simplemente inserta código normal de un archivo CSS, se compilará correctamente, mientras que en less puede usar variables y mixins (funciones que aceleran significativamente la escritura, por ejemplo, gradientes o propiedades que requieren muchas repeticiones con diferentes prefijos).

Entonces comencemos. En primer lugar, debemos entender que less es un archivo que, cuando se compila, nos dará un archivo css terminado. Hay varias formas de compilarlo. Puede crear un archivo MENOS y convertirlo usando Javascript sobre la marcha cuando se carga la página, o compilarlo con anticipación y usar el archivo CSS resultante.

Usando archivos LESS y Javascript

Primero debe descargar el archivo MENOS Javascript del sitio web y vincularlo a la página como cualquier otro script js.

Luego crearemos un archivo con la extensión .less y lo vincularemos usando el siguiente código:

En este caso, el archivo LESS debe ubicarse antes que el archivo JS. Ahora el archivo MENOS funcionará como CSS normal.

Compilando el archivo MENOS

Este método me atrae más porque no es necesario cargar MENOS archivos con múltiples conexiones, pero puedes cargar inmediatamente un único archivo CSS previamente minificado en el cliente.
En primer lugar, necesitamos instalar NodeJs. Para ello, nos dirigimos a la web oficial http://nodejs.org/ y pulsando en el botón instalar comenzará la descarga. archivo de instalación para su sistema operativo. Una vez instalado, ahora nos falta instalar el compilador less, para ello abriremos la consola e ingresaremos:

instalación npm -g menos

Ahora se puede compilar manualmente a través de la consola. Las instrucciones detalladas se pueden leer en el sitio web oficial de LESS. Utilice taskers (hablaremos de ellos más adelante) o utilice su IDE. Estoy usando PhpStorm con el complemento File Watchers. Ahora, habiendo abierto nuestro proyecto en él, creamos una carpeta en él, por ejemplo “fuente” o “menos”, donde luego guardaremos nuestros archivos fuente.

Abra Preferencias -> Vigilantes de archivos -> Haga clic en "+" en la parte inferior de la ventana y seleccione el tipo de archivo para rastrear menos. En este punto, si todo se hizo correctamente, incluso con la configuración predeterminada nuestro IDE monitoreará menos archivos en el proyecto y los compilará en tiempo real cuando cambien y los colocará en una carpeta al lado de la que se está compilando. archivo fuente. Lo principal es asegurarse de que en el campo Programa se especifique la ruta al compilador less (que instalamos en la consola).

Trabajando con MENOS

Finalmente, divirtámonos un poco y comencemos a escribir MENOS código. Como verá, el código es fácil de leer y comprender, ya que la sintaxis es muy similar al CSS normal, lo que reduce la barrera de entrada para que un desarrollador lo utilice.

Las variables en LESS funcionan de la misma manera que en PHP, JS y la mayoría de los demás lenguajes de programación. Puede usarlos para almacenar un valor y luego usar variables en lugar del valor en sí cuando lo necesite.

@ fuente de encabezado: Georgia; h1, h2, h3, h4 (familia de fuentes: @header-font;) .large (familia de fuentes:@header-font;)

En el ejemplo anterior, declaramos la variable @header-font y le escribimos el valor "Georgia". Ahora podemos usar esta variable siempre que queramos instalar la fuente Georgia. Si decidimos que Trebuchet MS es más adecuado para nuestros encabezados, entonces no necesitaremos revisar todo el archivo, simplemente cambiaremos el valor de la variable.
He encontrado un gran uso para las variables al definir los colores del sitio. En los viejos tiempos (que no fueron hace mucho tiempo) usaba algo como esto:

)
Con LESS podemos modificar y documentar nuestro flujo de trabajo al mismo tiempo.

No hay nada de malo en documentar tus colores de esta manera, es una buena práctica, el problema es que la documentación no tiene nada que ver con la funcionalidad de tus estilos. Si decide cambiar los colores después de la línea 2000 del código y luego cambia de opinión en la línea 3567, será extremadamente difícil corregir todos los colores y la documentación.

/* Colores para mi sitio web */ @color-orange: #ff9900 ; @color-gray_light: #cccccc; @color-negro_dark: #333333; @color-negro_medium: #454545; cuerpo ( fondo : @color-black_dark; color : @color-black_medium; ) a ( color :@color-orange; ) h1 , h2 , h3 , h4 , h5 , h6 ( color : @color-black_dark; ) Alcance variable
También puedes definir una variable dentro de una regla CSS. En este caso, las variables no estarán disponibles fuera de esta regla; se podrán utilizar localmente.

El alcance de las variables describe los lugares donde son accesibles. Si define una variable al principio del archivo LESS, estará disponible para cualquier código escrito después.

un botón ( @color : #ff9900 ; color :@color; ) ( fondo : @color; )

En este ejemplo, MENOS no se convertirá debido al error @color no está definido para usarse dentro de un elemento de botón. Si una variable se declara fuera de un elemento y dentro de otro elemento, solo será accesible localmente.

@color: #222222; un ( @color : #ffffff ; color :@color; ) botón ( fondo : @color; ) Variables dentro de variables

@color-navidad_red: #941 f1f; @nombre-del-color: "color-navidad_rojo"; color: @@nombre-del-color;

Personalmente, no uso esto mucho ya que las variables dentro de variables son casi inútiles sin cierres, pero estoy seguro de que habrá ejemplos inteligentes de cómo usar esto.

Constantes y variables

Es importante tener en cuenta que, al contrario de lo que acaba de leer, las variables en LESS son más bien constantes. Esto significa que, a diferencia de las variables, sólo se pueden definir una vez.

Operaciones

Puede lograr un control increíblemente preciso utilizando operaciones en MENOS. La idea es simple:

.button ( @unit : 3 px; borde :@unit solid #ddd ; relleno : @unit * 3 ; margen : @unit * 2 ; )

El código anterior establece la variable @unit en 3px. Luego establecemos este valor en el ancho del borde, el relleno en tres veces este ancho y el margen en el doble de este ancho.
Puedes utilizar operaciones de multiplicación, división, suma y resta. Para crear un bloque con un borde que aumenta el ancho de los lados en el sentido de las agujas del reloj, puedes usar el siguiente código:

.box ( @base_unit : 1 px; borde : @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 ) Gestión del color

Mi característica favorita de LESS es la gestión del color. Puede utilizar operaciones para mezclar colores y varias funciones especiales para trabajar con colores.

Operaciones de color

Si deseas cambiar el valor de un color, puedes hacerlo restando o sumando otro color.

@color: #941 f1f; botón (fondo: #941f1f + #222222; borde: #941f1f - #111111;)

La operación en segundo plano anterior aumentará cada valor HEX en 2. El resultado será "B64141", una versión más clara del color original. La operación de borde reducirá cada valor HEX en 1 y producirá un color más oscuro: “830E0E”.
En la práctica, hay muchos casos en los que partimos de un color base y necesitamos una versión ligeramente oscurecida o aclarada del mismo.

@botón de color: #d24444; entrada .submit ( color :#fff ; fondo :@color-button; borde :1 px sólido @color-button - #222 ; relleno :5 px 12 px; ) Funciones de color

Hay muchas más posibilidades para trabajar con el color; LESS te permite manipularlos a nivel de enlace. Puede aclarar, oscurecer, saturar, desaturar y rotar colores. Echa un vistazo a los siguientes ejemplos con imágenes para entender qué hace cada uno.

@color: #3 d82d1; .left_box (fondo: aclarar(@color, 20%); ) .right_box (fondo:oscurecer(@color, 20%); ) Anidamiento

Al escribir CSS, utilizamos estilos en cascada. Para cambiar los márgenes de un párrafo sólo dentro de un artículo, puedes utilizar el siguiente código:

artículo .post p (margen: 0 0 12 px 0;)

No hay nada de malo en este enfoque, pero si también necesitamos cambiar el estilo de los enlaces, citas, encabezados, etc. Solo dentro de un artículo, necesitarás usar el prefijo “article.post” para cada elemento. Esto hace que escribir código sea más aburrido y más difícil de leer.
En MENOS podemos anidar estas reglas, dándonos una versión más corta y lógica de nuestros estilos. Por ejemplo:

Article.post ( p( margen: 0 0 12px 0; ) a ( color: rojo; ) a:hover ( color: azul; ) img ( float:left; ) )

No se requiere sangría, pero hace que el código sea más legible. Los niveles de anidación no están limitados.

A ( color:rojo; ) p ( margen:0px; ) artículo ( a ( color: verde; ) p ( color: #555; a ( color:azul; ) ) )

mezclas

Mixins en LESS le evitará escribir código innecesario. ¿Alguna vez has creado un marco redondeado donde sólo se redondean las esquinas superiores?

.tab ( -webkit-border-top-left-radius: 6 px; -webkit-border-top-right-radius: 6 px; -moz-border-radius-topleft: 6 px; -moz-border-radius- arriba a la derecha: 6 px; radio del borde superior izquierdo: 6 px;

Y así cada vez... Con MENOS, todo esto se puede cambiar creando un mixin. Las impurezas son elementos reutilizables que, por regla general, se pueden añadir a cualquier elemento. Y ni siquiera necesitas aprender una nueva sintaxis.

En el código anterior, hemos definido un elemento .rounded_top para redondear las esquinas superiores. Cuando lo agregamos a cualquier otro elemento como un mixin (ver .tab), esencialmente estamos importando las reglas que creamos para él. Gracias a esta sintaxis podemos utilizar cualquier elemento como mixin.

Los estilos para el elemento .submit son esquinas redondeadas en la parte superior, color blanco y fondo rojo (valor #333 anulado).

Mixins con parámetros

Si bien los mixins de parámetros suenan complicados, resuelven el problema de una manera muy sencilla. En los ejemplos anteriores, viste cómo podemos definir un elemento con un radio de 6px en las esquinas superiores. ¿Qué pasa si queremos crear un elemento con un radio de 3px? ¿Deberíamos declarar mixins diferentes para todos los valores de píxeles? Por supuesto que la respuesta es no, ¡debemos usar mixins con parámetros!
Son similares a las funciones porque pueden cambiar los valores cuando se llaman. Reescribamos el ejemplo con border-radius para ver cómo funciona.

En el código anterior, el radio del elemento .tab es 6px y el elemento .submit tendrá un valor de 3px.

Valores estándar

Si normalmente usa el mismo radio de borde, pero a veces necesita uno diferente, debe configurar el mixin en un valor estándar.

En este ejemplo, .tab obtendrá el valor predeterminado de 6px y .submit obtendrá el valor predeterminado de 3px.

Múltiples opciones

También puede utilizar múltiples parámetros para identificar impurezas más complejas.

En este ejemplo, class.read_more está formateado con un relleno de 4px, un color de fondo de #e7ba64 y un radio de borde de 0px.

Usando todos los argumentos a la vez

Otra opción a la hora de utilizar argumentos es combinarlos. Las propiedades taquigráficas en CSS tienen varios valores escritos uno tras otro.

div (borde: 1 px sólido #bbb;)

Para darle a todos los elementos requeridos un borde gris, puede usar esta función:

Gray_border(@ancho: 1px, @tipo: sólido, @color: #bbb)( borde:@argumentos; ) div ( .gray_border(2px, discontinuo); )

@arguments es una palabra clave especial que muestra todos los parámetros uno por uno en un orden determinado. El resultado del código MENOS anterior será:

div (borde: 2 px discontinuo #bbb;) Mixins paramétricos sin parámetros

También puedes utilizar mixins paramétricos sin parámetros. Esto se usa cuando no necesita generar un mixin en CSS, pero desea que sus reglas se apliquen al elemento en el que se usa.

Alerta (fondo: rojo; color: blanco; relleno:5px 12px; ) .error_message ( .alert; margen: 0 0 12px 0; )

El CSS del código anterior será así:

.alert (fondo: rojo; color: blanco; relleno: 5 px 12 px;) .error_message (fondo: rojo; color: blanco; relleno: 5 px 12 px; margen: 0 0 12 px 0;)

Para ocultar la clase .alert, debe configurar el parámetro en vacío.

Alert() (fondo: rojo; color: blanco; relleno:5px 12px; ) .error_message ( .alert; margen: 0 0 12px 0; )

El CSS terminado se verá así:

.error_message (fondo: rojo; color: blanco; relleno: 5 px 12 px; margen: 0 0 12 px 0;)

Esto se utiliza principalmente para reducir el tamaño del archivo CSS.

Espacio de nombres

Los espacios de nombres en los lenguajes de programación se suelen utilizar para agrupar elementos con funcionalidad similar. Podemos lograr algo similar en LESS combinando nuestro código con mixins.

#my_framework ( p ( margen: 12px 0; ) a ( color: azul; decoración de texto: ninguno; ) .submit ( fondo: rojo; color: blanco; relleno: 5px 12px; ) )

Al comenzar a trabajar en un nuevo sitio basado en su marco, puede agregar el enlace #my_framework y usarlo sin obstruir el espacio de nombres.

Botón_enviar ( #mi_marco > .enviar; )

Esta también es una excelente manera de hacer posible cambiar y refinar temas rápidamente. Si está desarrollando varios temas para su empresa, para cambiar las plantillas sobre la marcha, puede colocarlas todas en un archivo MENOS usando paquetes.

Como resultado, tenemos la oportunidad de acelerar la redacción del diseño de nuestro proyecto utilizando nuestros propios mixins preparados previamente o el marco. Además, al usar menos, la legibilidad, la estructura y la lógica de sus estilos aumentan en un orden de magnitud, lo que mejorará el soporte del sitio en el futuro.

Popular en la categoría: