Usando menos. MENOS: Lenguaje de estilo programable. Alcance variable

No me gusta el CSS. Es simple y claro. Ésta es la fuerza impulsora de Internet, pero es demasiado limitada y difícil de gestionar. Es hora de limpiar este lenguaje y hacerlo más útil usando CSS dinámico con 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ía muy interesante si usáramos un poco de programación y lógica en CSS para convertirla en una herramienta más poderosa. 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 válido MENOS, pero los elementos MENOS adicionales no funcionarán 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. Usar LESS y un archivo Javascript Primero, debes descargar el archivo LESS 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 serán accesibles fuera de esta regla; se podrán utilizar localmente.

Un botón ( @color: #ff9900; color:@color; ) ( fondo: @color; )
En este ejemplo, LESS no se convertirá debido al error de que 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 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 del marco reducirá cada valor HEX en 1 y producirá más color oscuro: “830E0E”.
En la práctica, hay muchos casos en los que partimos de un color base y necesitamos una versión del mismo ligeramente oscurecida o aclarada.

@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, cambie el valor de @color-button a verde, cambiará no sólo el color de fondo, sino que también reemplazará el trazo con 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 en 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 insignificante: ¿por qué necesitamos esta información cuando podemos simplemente 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).
Teniendo esto en cuenta, si encuentras un buen color morado como el #e147d4, podrás encontrar fácilmente diferentes colores con exactamente 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 creado un marco redondeado donde 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 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.

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 de 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, color de fondo#e7ba64 y con un radio de borde de 0px.

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

Div (borde:1px 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:2px 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í:

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 el tamaño del archivo CSS.

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 sitio nuevo 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 procesarlas con 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.

Gobierna cómo se ve la mayor parte del sitio. /* cuerpo ( padding:0px; // Esto restablece el relleno del cuerpo )
¿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 de escape se procesen antes de enviarlas al archivo CSS. Conclusión Como con cualquier nueva tecnología
o se abusa 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 métodos, y cuándo utilizar los habituales. 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.

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 proyectos, incluso dificultad media se hacen 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 comprender que less es un archivo que, cuando se compila, nos dará un archivo listo para usar. archivo css. 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 al hacer clic en el botón instalar comenzará la descarga del archivo de instalación de 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. Instrucciones detalladas se puede 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 en este momento, 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:

/* 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;) color: #333333;

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

/* 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

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.
También puedes definir una variable dentro de una regla CSS. En este caso, las variables no serán accesibles 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 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

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

@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 del mismo ligeramente oscurecida o aclarada.

@ 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.

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, 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.

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 de 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.

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 opciones

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.

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 sitio nuevo 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.

#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; )

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.

Si consideramos los preprocesadores junto con CSS, obtenemos una imagen más clara que si consideramos el concepto de preprocesador por separado.

Definición

El preprocesador CSS (del preprocesador CSS en inglés) es un complemento de CSS que agrega versiones anteriores oportunidades no disponibles para CSS, utilizando nuevas construcciones sintácticas.

La tarea principal del preprocesador es proporcionar estructuras sintácticas convenientes para que el desarrollador las simplifique y, por lo tanto, acelere el desarrollo y soporte de estilos en los proyectos.

Los preprocesadores CSS convierten el código escrito utilizando un lenguaje de preprocesador en código CSS limpio y válido.

Con los preprocesadores, puede escribir código destinado a:

• Legibilidad humana
• Estructurado y lógico
• Actuación

Y esto es sólo una pequeña parte de lo que el preprocesador puede ofrecerle. Pero no te adelantes.

Azúcar sintáctico

Antes de profundizar en los preprocesadores CSS, actualicemos nuestro vocabulario con un nuevo concepto: azúcar sintáctico.

El azúcar sintáctico (del inglés syntactic sugar) son adiciones a la sintaxis de un lenguaje de programación que no introducen cambios significativos ni nuevas características, pero hacen que el lenguaje sea más legible para los humanos.

El azúcar sintáctico se introduce en el lenguaje. opciones alternativas registros de construcciones incrustadas en esta lengua. Las opciones de grabación alternativas deben entenderse como construcciones más cortas o más convenientes para los humanos, que finalmente serán convertidas por el preprocesador al idioma de origen, sin azúcar sintáctica.

Si intentamos aplicar este concepto a los preprocesadores CSS, entonces, en el caso general, describe completamente su esencia. Permítanme recordarles una vez más que la tarea principal de los preprocesadores es simplificar y acelerar el desarrollo, pero ¿de qué otra manera se puede hacer esto si no se introducen opciones de grabación alternativas?

¿Qué tipos de preprocesadores CSS existen?

Es hora de pasar a ejemplos más específicos, es decir, los propios preprocesadores CSS. En el momento de escribir este artículo, existen tres preprocesadores populares:

• Descaro (SCSS)
• Aguja

Y algunos jugadores menores para nosotros:

• Hojas de estilo de cierre
• Aplastamiento CSS

Hablaremos de los tres primeros por separado un poco más abajo, pero no hablaremos de los dos últimos en absoluto, debido a su impopularidad. Si lo desea, puede encontrar fácilmente descripciones de estos preprocesadores en un motor de búsqueda.

¿Cuál es el punto de utilizar preprocesadores?

Como señalé anteriormente, las principales ventajas son la legibilidad del código, la estructuración y una mayor productividad.

También existen otras razones para empezar a utilizar un preprocesador hoy. Quiero llamar la atención sobre esto, ya que los desarrolladores en el pasado, y muchos incluso ahora, se niegan a utilizar preprocesadores, considerándolos complejos, incomprensibles e innecesarios.

CSS es difícil

El CSS estándar es difícil. La sintaxis no anidada que ofrecen los preprocesadores CSS es simplemente difícil de leer. Además, es necesario recordar el nombre del padre al anidar. La falta de variables y "funciones" normales hace que el código CSS sea confuso y de mente estrecha.

Documentación disponible

Atrás quedaron los días en que la documentación de los preprocesadores estaba disponible sólo para personas "con conocimiento". Ahora cualquiera puede dominar cualquiera de los preprocesadores en el menor tiempo posible y con costos mínimos fortaleza

Facilidad de uso

Usar preprocesadores es más fácil que antes y mucho más sencillo. Para hacer esto, solo necesita instalar un programa que monitoreará los archivos destinados al preprocesador y, cuando cambien, compilará el contenido de estos archivos en código CSS puro.

Para usuarios más avanzados existen creadores de proyectos especiales. No creas que sólo porque estás usando un programa de preprocesador en lugar de un generador de proyectos no eres lo suficientemente bueno. De hecho, estos grifos ofrecen control total y configuraciones avanzadas, pero no te conviertas en un Jedi.

Estructura y coherencia del código.

La característica más popular que ofrece cualquier preprocesador CSS es la capacidad de anidar selectores entre sí. No daré un ejemplo ahora, ya que la parte correspondiente del libro se escribirá sobre las capacidades de Less, incluido el anidamiento. En este punto, todo lo que debes saber es que cuando usas preprocesadores, puedes anidar un selector dentro de otro y otro dentro de otro, lo que resulta en algo similar a la tabla de contenido de un libro:

1. Selector de padres 1.1. Selector anidado 1.2. Selector anidado 1.2.1. Selector anidado 1.3. Selector anidado

Por supuesto, en la vida real, los selectores no pueden comenzar con números; sin embargo, para establecer un paralelo entre el anidamiento y la tabla de contenido, creo que tal omisión es apropiada aquí.

Impurezas

En pocas palabras, usando mixins (del inglés Mixins), puedes hacer que el código sea reutilizable. Esto ayuda a evitar clases auxiliares en el marcado o la duplicación de propiedades de un selector a otro.

Modularidad

Otra ventaja que me convencería de empezar a utilizar un preprocesador CSS ahora mismo sería la capacidad de anidar archivos dentro de archivos, es decir, en otras palabras, concatenar archivos en una secuencia determinada. Sí, esto se puede arreglar en CSS puro, pero junto con otras características resulta ser una herramienta muy poderosa.

Al mismo tiempo, tenemos la oportunidad de compartir módulos (bibliotecas mixin) que creamos para nuestras necesidades y que consideramos útiles para otras personas. Resulta que cualquier desarrollador puede descargar su biblioteca y usarla para sus propios fines, llamando a los mixins que escribió según sea necesario.

¿Por qué no esperar a que CSS evolucione?

El desarrollo de CSS está dando pasos muy pequeños e inciertos, ya que el W3C prioriza la velocidad de respuesta (rendimiento) de CSS. Por un lado, esto es correcto y muy importante, pero por otro, es una falta de comodidad para los desarrolladores.

Como ejemplo, usaré una de las especificaciones CSS4, que se introdujo bajo presión de los desarrolladores: el selector principal. Un camino tan largo desde la idea hasta la decisión se debió al hecho de que el W3C consideró que dicho selector era lento y su uso posterior en los sitios conduciría a una desaceleración enorme. Por supuesto, estamos hablando del uso generalizado de este selector, y no de casos aislados.

Por lo tanto, no espere revoluciones y cambios en el futuro cercano que puedan eclipsar la funcionalidad y capacidades de los preprocesadores CSS.

Tipos de preprocesadores

Por supuesto, como en cualquier otro ámbito, siempre hay competencia, y en el mercado de preprocesadores ahora hay tres bandos principales en guerra:

• Descaro (SCSS)
• Aguja

Los llamo hostiles, porque cada seguidor de uno de los preprocesadores considera que es su deber arrojar impurezas a representantes de otras, digamos, religiones. Esta hostilidad es especialmente común entre los aficionados. preprocesador descarado, que se considera el más antiguo y potente de los tres preprocesadores.

Para obtener la imagen completa, quiero dar breve información para cada preprocesador:

Menos

En realidad, el héroe de este libro. El preprocesador más popular en el momento de escribir este artículo. Fundada en 2009 por Alexis Sellier y escrita en JavaScript (escrito originalmente en Ruby, pero Alexis tomó la decisión correcta en el momento adecuado). Tiene todo capacidades básicas preprocesadores y aún más, pero no tiene construcciones condicionales y ciclos en nuestra comprensión habitual. La principal ventaja es su simplicidad, una sintaxis casi estándar para CSS y la capacidad de ampliar la funcionalidad mediante un sistema de complementos.

Descaro (SCSS)

El más potente de los preprocesadores de CSS. Tiene una comunidad de desarrolladores bastante grande. Fundado en 2007 como módulo para HAML y escrito en Ruby (hay un puerto para C++). Tiene una gama mucho mayor de capacidades en comparación con Less. Las capacidades del preprocesador se amplían con la biblioteca Compass multifuncional, que le permite ir más allá Marco CSS y trabajar, por ejemplo, con sprites en modo automático.

Tiene dos sintaxis:

• Sass (hojas de estilo sintácticamente impresionantes) - simplificado sintaxis CSS, que se basa en la identificación. Considerado obsoleto.
• SCSS (Sassy CSS): basado en la sintaxis CSS estándar.

Aguja

El preprocesador CSS más joven, pero al mismo tiempo más prometedor. Fundada en 2010 por una personalidad muy conocida en nuestro círculo, TJ Holowaychuk. Dicen que este es el preprocesador más conveniente y extensible, y también es más flexible que Sass. Escrito en JavaScript. Admite muchas opciones de sintaxis, desde CSS hasta simplificada (faltan: , ; , () y algunos paréntesis).

Para simplificar la vida de un diseñador de diseño, se han inventado una cantidad suficiente de marcos y complementos. Ahora hablaremos de simplificar y acelerar la redacción de estilos para sitios web. Como sabes, para esto se utilizan hojas de estilos CSS en cascada.

MENOS es un superconjunto de CSS. MENOS es CSS programable. MENOS se expande CSS dinámico capacidades como variables, mixins y operaciones.

Para empezar a escribir estilos en LESS, basta con tener conocimientos de CSS; no es necesario aprender nada nuevo. Por tanto, la barrera de entrada a esta lengua es muy baja.

¿Cómo cambiar a MENOS?

Dado que LESS usa sintaxis CSS, esto significa que el CSS existente ya es LESS válido. Para un uso más cómodo CSS listo para usar en MENOS, puedes utilizar servicios online Conversión CSS en MENOS:

Después de convertir los estilos a LESS, cree un archivo correspondiente con la extensión .less, por ejemplo style.less.

Uso

No consideré la opción de compilación sobre la marcha, porque inicialmente el tiempo de carga de la página aumenta. Por lo tanto, es mejor realizar la conversión manualmente utilizando aplicaciones o complementos adecuados:

• Sin victorias (SO: Windows)
• MENOS compilador CSS (complementos IDEA)

Si está utilizando el entorno de desarrollo IDEA, le recomiendo utilizar un complemento. Cuando pierdes el foco del programa, se compilará menos en CSS, esto es muy conveniente :)

Una vez que comprenda cómo trabajar con LESS, puede pasar a las características principales del lenguaje que hacen que valga la pena usarlo:

variables

Las variables le permiten definir valores utilizados permanentemente en un lugar y luego reutilizarlos en cualquier lugar de la hoja de estilo, lo que facilita su adición. cambios globales Literalmente hasta cambiar una línea de código.

MENOS @color: #4D926F; #header ( color: @color; ) h2 ( color: @color; ) CSS #header ( color: #4D926F; ) h2 ( color: #4D926F; ) Mixins

Los mixins le permiten incluir todas las propiedades de una clase en otra clase mediante encendido sencillo el nombre de la clase como el valor de una de las propiedades.

MENOS .box-sizing(@a: border-box) ( box-sizing: @a; -webkit-box-sizing: @a; -moz-box-sizing: @a; ) .wrapper ( box-sizing; ) CSS .wrapper (box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;) Reglas anidadas

En lugar de crear nombres de selectores largos para indicar herencia, en Less simplemente podemos anidar selectores dentro de otros selectores. Esto hace que la herencia sea más clara de entender y las hojas de estilo sean más cortas.

MENOS .content (a (decoración de texto: ninguna; &:hover (decoración de texto: subrayado;) ) ) CSS .content a (decoración de texto: ninguna; ) .content a:hover (decoración de texto: subrayado; ) Operaciones

Las operaciones le permiten aumentar, disminuir, dividir y multiplicar tanto los valores de propiedad como los colores, lo que permite especificar relaciones complejas entre propiedades. Muy conveniente al configurar dimensiones para bloques proporcionales. Por ejemplo, la parte principal del sitio y la barra lateral.

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 la vida urbana.

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

El contorno se volvió cada vez menos claro a medida que la luz desteñido.

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 ansiosas. 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.

Camina menos de lo que debería.