Menos (lenguaje de hoja de estilo)

Less permite definir variables. Las variables en Less se definen con una arroba (@). La asignación de variables se realiza con dos puntos (:).

Durante la traducción, los valores de las variables se insertan en el documento CSS de salida. ^{[ 2 ]}

@ color-verde-pálido : # 4D926F ;# encabezado { color : @ pale-green-color ; } h2 { color : @ pale-green-color ; }

El código anterior en Less se compilaría al siguiente código CSS.

# encabezado { color : #4D926F ; } h2 { color : #4D926F ; }

Los mixins permiten incrustar todas las propiedades de una clase en otra, incluyendo el nombre de la clase como una de sus propiedades, comportándose así como una especie de constante o variable. También pueden comportarse como funciones y aceptar argumentos. CSS no admite mixins: cualquier código repetido debe repetirse en cada ubicación. Los mixins permiten repeticiones de código más eficientes y limpias, así como una modificación más sencilla del código. ^{[ 2 ]}

.rounded -corners ( @radius : 5px 10px 8px 2px ) { -webkit- border-radius : @ radius ; -moz- border-radius : @ radius ; border-radius : @ radius ; }# encabezado { .esquinas-redondeadas ; } # pie-de-página { .esquinas-redondeadas(10px 25px 35px 0px) ; }

El código anterior en Less se compilaría al siguiente código CSS:

# encabezado { -webkit- border-radius : 5 px 10 px 8 px 2 px ; -moz- border-radius : 5 px 10 px 8 px 2 px ; border-radius : 5 px 10 px 8 px 2 px ; } # pie de página { -webkit- border-radius : 10 px 25 px 35 px 0 px ; -moz- border-radius : 10 px 25 px 35 px 0 px ; border-radius : 10 px 25 px 35 px 0 px ; }

Less tiene un tipo especial de conjunto de reglas llamado mixins paramétricos que se pueden mezclar con clases similares, pero que aceptan parámetros.

# encabezado { h1 { tamaño de fuente : 26 px ; grosor de fuente : negrita ; } p { tamaño de fuente : 16 px ; a { decoración de texto : ninguna ; color : rojo ; &:hover { ancho del borde : 1 px ; color : #fff ; } } } }

El código anterior en Less se compilaría al siguiente código CSS:

# encabezado h1 { tamaño de fuente : 26 px ; grosor de fuente : negrita ; } # encabezado p { tamaño de fuente : 16 px ; } # encabezado p a { decoración de texto : ninguna ; color : rojo ; } # encabezado p a : hover { ancho del borde : 1 px ; color : #fff ; }

Less permite realizar operaciones y usar funciones. Las operaciones permiten sumar, restar, dividir y multiplicar valores de propiedades y colores, lo que puede usarse para crear relaciones complejas entre propiedades. Las funciones se corresponden directamente con el código JavaScript, lo que permite manipular valores.

@the -border : 1px ; @base -color : # 111 ; @red : # 842210 ;# encabezado { color : @ color-base * 3 ; borde-izquierdo : @ el-borde ; borde-derecho : @ el-borde * 3 ; } # pie-de-página { color : @ color-base + #003300 ; color-borde : desaturar ( @ rojo , 10 % ); }

El código anterior en Less se compilaría al siguiente código CSS:

# encabezado { color : #333 ; borde izquierdo : 1 px ; borde derecho : 3 px ; } # pie de página { color : #114411 ; color del borde : #7d2717 ; }

Tanto Sass como Less son preprocesadores CSS, que permiten escribir CSS limpio en una estructura de programación en lugar de reglas estáticas. ^{[ 5 ]}

Less se inspira en Sass. ^{[ 6 ] [ 3 ]} Sass fue diseñado para simplificar y extender CSS, por lo que se eliminaron elementos como las llaves de la sintaxis. Less fue diseñado para ser lo más parecido posible a CSS, y como resultado, el CSS existente puede usarse como código Less válido. ^{[ 7 ]}

Las versiones más recientes de Sass también introdujeron una sintaxis similar a CSS llamada SCSS (Sassy CSS).