LESS CSS - Guía para principiantes

CSS Pre-procesador ahora se ha convertido en un elemento básico en el desarrollo web. Incluye CSS sencillo con características de programación como Variables, Funciones o Mixin, y Operación que permiten a los desarrolladores web construir Estilos CSS modulares, escalables y más manejables..

En esta publicación, analizaremos LESS, que ha sido uno de los preprocesadores de CSS más populares, y también se ha implementado ampliamente en numerosos frameworks front-end como Bootstrap. También caminaremos por la Utilidades, herramientas y configuraciones básicas para ayudarlo a comenzar a funcionar con MENOS.

El compilador

Para empezar, necesitaremos configurar un compilador. La sintaxis LESS no es estándar, según la especificación W3C. El navegador no podría procesar y generar la salida, a pesar de heredar rasgos similares a CSS.

Aquí hay un vistazo al código MENOS:

 @ base de color: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; color: @ color-base;

El compilador procesará el código y convertirá la sintaxis MENOS en un formato CSS compatible con el navegador:

 .class1 color de fondo: # 2d5e8b;  .class1 .class2 background-color: #fff; color: # 2d5e8b;

Hay una serie de herramientas para compilar CSS:

Usando JavaScript

MENOS viene con un less.js Archivo que es realmente fácil de implementar en su sitio web. Crear una hoja de estilo con .Menos extensión y enlace en su documento utilizando el rel = "hoja de estilo / menos" atributo.

Puede obtener el archivo JS aquí, descargarlo a través del administrador de paquetes de Bower, de lo contrario, puede vincularlo directamente a CDN, así:

Usted está todo listo y puede componer estilos dentro de la .Menos. La sintaxis LESS se compilará sobre la marcha a medida que se cargue la página. Manten eso en mente el uso de JavaScript no se recomienda en la etapa de producción ya que afectará gravemente el rendimiento del sitio web.

Siempre debe compilar la sintaxis MENOS de antemano y solo servir CSS regular en lugar. Puedes usar Terminal, un corredor de tareas como Gruñido o Trago, O una aplicación gráfica para hacerlo..

Usando CLI

LESS proporciona una interfaz de línea de comandos nativa (CLI), menos, que maneja varias tareas más allá de simplemente compilar la sintaxis LESS. Usando el CLI podemos eliminar los códigos, comprimir los archivos y crear un mapa de origen. El comando se basa en Node.js que efectivamente permite que el comando funcione en Windows, OS X y Linux.

Asegúrese de que se haya instalado Node.js (de lo contrario, tome el instalador aquí), luego instale LESS CLI a través de NPM (Node Package Manager) usando la siguiente línea de comando.

 npm instalar -g menos

Ahora tienes el menos comando a su disposición para compilar MENOS en CSS:

 lessc style.less style.css

Uso de Task Runner

Task Runner es una herramienta que automatiza las tareas de desarrollo y los flujos de trabajo. En lugar de ejecutar el menos comando cada vez que nos gustaría compilar nuestros códigos, podemos instalar un corredor de tareas, configurarlo para ver los cambios dentro de nuestros archivos MENOS, y compilar inmediatamente MENOS en CSS.

Dos herramientas populares en esta categoría hoy en día son Grunt y Gulp. Tenemos una serie de publicaciones que cubren estas herramientas. Consulte las publicaciones para saber cómo implementar estas herramientas en su flujo de trabajo..

Cómo utilizar Grunt para automatizar su flujo de trabajo
Empezando con Gulp.js
La batalla de los scripts de construcción: Gulp Vs Grunt

Uso de la aplicación gráfica

Para aquellos que no estén acostumbrados a usar el Terminal y las líneas de comando, pueden optar por una interfaz gráfica. Hay una gran cantidad de aplicaciones para compilar MENOS hoy en día para todas las plataformas, algunas gratuitas y otras de pago.

Aquí está la lista completa:

Aplicación	Plataforma	Costo
Mezcla	OS X / Windows	Gratis
Coala	OS X / Windows / Linux	Gratis
Prepros	OS X / Windows	Freemium (USD29)
WinLESS	Windows	Gratis
CodeKit	OS X	USD32

El compilador por el que opte (aparte de JavaScript) realmente no importa, francamente, siempre que la herramienta funcione y complemente su flujo de trabajo, hágalo..

El editor de código

Puedes usar cualquier editor de código. Simplemente instale un complemento o una extensión para resaltar la sintaxis MENOS con los colores adecuados, una función que ahora está disponible para casi todos los editores de código e IDE, incluyendo SublimeText, Notepad ++, VisualStudio, TextMate y Eclipse para nombrar algunos.

Ahora que tenemos el compilador y el editor de código listos, podemos comenzar a escribir estilos CSS con la sintaxis LESS.

Sintaxis de MENOS

A diferencia del CSS normal como lo conocemos, LESS funciona mucho más como un lenguaje de programación. Es dinámico, así que espera encontrar algunas terminologías como Variables, Operación y Alcance en el camino.

Variables

En primer lugar, echemos un vistazo a la Variables.

Si ha estado trabajando bastante tiempo con CSS, probablemente haya escrito algo como esto, donde tenemos valores repetitivos asignados en bloques de declaración en toda la hoja de estilos..

 .class1 color de fondo: # 2d5e8b;  .class2 background-color: #fff; color: # 2d5e8b;  .class3 border: 1px solid # 2d5e8b;

Esta práctica está realmente bien, hasta que nos encontramos teniendo que analizar más de mil o más fragmentos similares a lo largo de la hoja de estilo. Esto podría suceder cuando se construye un sitio web a gran escala. El trabajo se volverá tedioso.

Si estamos usando un preprocesador de CSS como LESS, la instancia anterior no sería un problema, podemos usar Variables. Las variables nos permitirán almacenar. una constante Valor que luego puede ser reutilizado en toda la hoja de estilos..

 @ base de color: # 2d5e8b; .class1 background-color: @ color-base;  .class2 background-color: #fff; color: @ color-base;  .class3 border: 1px solid @ color-base;

En el ejemplo anterior, almacenamos el color. # 2d5e8b en el @ color-base variable. Cuando quiera cambiar el color, solo necesitamos cambiar el valor en esta variable.

Aparte del color, también puede poner otros valores en las variables como por ejemplo:

 @ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5

Mixins

En MENOS, podemos usar Mixins para reutilizar declaraciones enteras en un conjunto de reglas CSS en otro conjunto de reglas. Aquí hay un ejemplo:

 .gradientes fondo: #eaeaea; fondo: gradiente lineal (arriba, #eaeaea, #cccccc); fondo: -o-lineal-gradiente (arriba, #eaeaea, #cccccc); fondo: -ms-linear-gradient (superior, #eaeaea, #cccccc); fondo: -moz-linear-gradient (top, #eaeaea, #cccccc); fondo: -webkit-linear-gradient (arriba, #eaeaea, #cccccc);

En el fragmento de código anterior, tenemos un valor predeterminado predeterminado gradiente color dentro del .gradientes clase. Cada vez que queremos agregar los gradientes simplemente insertamos el .gradientes de esta manera:

 div .gradients; borde: 1px sólido # 555; radio del borde: 3px;

los .caja heredará todo el bloque de declaración dentro de la .gradientes. Por lo tanto, la regla de CSS anterior es igual a la siguiente CSS simple:

 div background: #eaeaea; fondo: gradiente lineal (arriba, #eaeaea, #cccccc); fondo: -o-lineal-gradiente (arriba, #eaeaea, #cccccc); fondo: -ms-linear-gradient (superior, #eaeaea, #cccccc); fondo: -moz-linear-gradient (top, #eaeaea, #cccccc); fondo: -webkit-linear-gradient (arriba, #eaeaea, #cccccc); borde: 1px sólido # 555; radio del borde: 3px;

Además, si usa mucho CSS3 en su sitio web, puede usar Elementos MENOS para facilitar su trabajo. LESS Elements es una colección de elementos comunes. CSS3 Mixins que podemos usar a menudo en hojas de estilo, como radio del borde, gradientes, sombra paralela y así.

Para usar LESS Elements, simplemente agregue el @importar gobierne en su hoja de estilos MENOS, pero no olvide descargarlo primero y agregarlo a su directorio de trabajo.

 @import "elements.less";

Ahora podemos reutilizar todo el clases provisto desde el Elements.less, por ejemplo, para agregar 3px radio de borde a un div, podemos escribir:

 div .rounded (3px);

Para mayor uso, consultar la documentación oficial..

Reglas anidadas

Cuando escribe estilos en CSS plano, también puede haber pasado por estas estructuras de código típicas.

 nav altura: 40px; ancho: 100%; fondo: # 455868; borde inferior: 2 píxeles sólidos # 283744;  nav li ancho: 600px; altura: 40px;  nav li a color: #fff; línea de altura: 40px; text-shadow: 1px 1px 0px # 283744;

En el CSS simple, seleccionamos los elementos secundarios al dirigirnos primero al padre en cada conjunto de reglas, lo cual es considerablemente redundante si seguimos los “mejores prácticas” principio.

En LESS CSS, podemos simplificar los conjuntos de reglas por Anidando los elementos hijos dentro de los padres., como sigue;

 nav altura: 40px; ancho: 100%; fondo: # 455868; borde inferior: 2 píxeles sólidos # 283744; li ancho: 600px; altura: 40px; a color: #fff; línea de altura: 40px; text-shadow: 1px 1px 0px # 283744;

También puede asignar pseudo-clases, me gusta :flotar, al selector usando el símbolo "&" comercial (&).

Digamos que queremos añadir :flotar a la etiqueta de anclaje de arriba, podemos escribirlo de esta manera:

 a color: #fff; línea de altura: 40px; text-shadow: 1px 1px 0px # 283744; &: hover background-color: # 000; color: #fff;

Operación

También podemos realizar operaciones en MENOS, tales como Suma, resta, multiplicación y división. A números, colores y variables en la hoja de estilo..

Digamos que queremos que el elemento B sea dos veces más alto que el elemento A. En ese caso, podemos escribirlo de esta manera:

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

Como puede ver arriba, primero almacenamos el valor en el @altura variable, luego asigne el valor al elemento A.

En el elemento B, en lugar de calcular la altura nosotros mismos., Podemos multiplicar la altura por 2. utilizando el operador de asterisco (*). Ahora, cada vez que cambiemos el valor en el @altura variable, elemento B siempre tendrá el doble de altura.

Vea más ejemplos de operaciones avanzadas en nuestro tutorial anterior: Diseño de una barra de navegación con un menú elegante.

Alcance

MENOS aplica el Alcance concepto, donde las variables se heredarán primero del ámbito local, y cuando no esté disponible localmente, buscará a través de un ámbito más amplio.

 encabezado @color: negro; color de fondo: @color; nav @color: azul; color de fondo: @color; a color: @color;

En el ejemplo anterior, encabezamiento tiene un negro color de fondo, pero navel color de fondo será azul ya que tiene la variable @color en su ámbito local, mientras que la variable una También tendrá azul que se hereda de su padre más cercano., nav.

Pensamiento final

En última instancia, esperamos que esta publicación pueda brindarle una comprensión básica de cómo podemos escribir CSS de una mejor manera al usar MENOS. Quizás te sientas un poco incómodo al principio, pero a medida que lo intentes con más frecuencia, seguramente se volverá mucho más fácil..

Aquí hay un par de tutoriales que te animo a que busques para obtener más consejos y prácticas, que pueden ayudarte a aumentar tu habilidad MENOS al siguiente nivel..

LESS CSS Tutorial: Designing A Slick Menu Navigation Bar
Entendiendo las funciones de color MENOS
3 nuevas funciones LESS CSS que deberías saber