Tutorial de LESS: Reglas necesarias

Aquí estoy una vez más con otra entrega de este tutorial del que muchos me pedís más y más entregas.

Repasando brevemente lo visto hasta ahora, hemos visto una introducción a lo que es LESS, cómo se utilizan variables y los mixins.

En esta ocasión, siguiendo con el plan de vuelo, veremos las reglas necesarias que todo el mundo debería cumplir.

Plan de vuelo

1. Introducción.
2. El uso de variables.
3. Los Mixins.
4. Reglas necesarias.
5. Funciones.
6. Divide y vencerás.

¿Por qué necesarias? ¿A qué te refieres?

Si has programado alguna vez, habrás oído hablar del código necesario o quizá estés más familiarizado con el palabro en inglés «nesting in code«.

Para que te hagas una idea de qué es ese «nesting code«, serían las tablas del diseño web con tablas o la clase main en un proyecto java. Código necesario, aunque no esté escrito en ningún lado.

En el caso de CSS supongamos el siguiente escenario: estamos maquetando una web y tenemos un párrafo con sus reglas CSS. Además, para la etiqueta estándar podemos tener varias clases, para un párrafo de introducción y para un párrafo resaltado. Digamos que el párrafo estándar lo definimos con una fuente sans-serif con un tamaño normal, line-height, etc. Así es como se vería nuestro CSS (es sólo un ejemplo, nada de LESS):

p {
    color: #232323;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 21px;
}

Totalmente normal, como puedes observar.

Para el párrafo de introducción, hacemos que el tamaño de fuente sea un poquito más grande y que todo el texto sean mayúsculas. Por último, para el párrafo resaltado pondremos negrita y azul. Recuerda, es sólo un ejemplo.

p {
    color: #232323;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 21px;
}
 
p .intro {
    font-variant: small-caps;
    font-size: 16px;
    line-height: 24px;
}
 
p .highlight {
    color: #00214D;
    font-weight: bold;
}

El código es largo, y eso que es un ejemplo básico. Con LESS es, precisamente, «menos» (chiste fácil, lo siento).

Nuestra primera «Regla necesaria» con LESS

Ahora vamos a copiar el código que escribí en el ejemplo de arriba pero utilizando LESS y reglas necesarias. Tranquilo, pronto entenderás el concepto al 100%.

Ten en cuenta que una regla necesaria en LESS empieza como una regla normal. Para este ejemplo vamos a utilizar variables, que para eso las hemos aprendido aquí.

Al igual que en el ejemplo anterior, empezaré con el párrafo estándar:

// Variables
@textColor: #232323;
@textHighlight: #00214D;
@fontFamily: Helvetica, Arial, sans-serif;
@fontSize: 14px;
@lineHeight: 21px;
 
@introSize: 16px;
@introLineHeight: 24px;
@introFontVariant: small-caps;
 
// LESS for Paragraph
p {
	color: @textColor;
	font-family: @fontFamily;
	font-size: @fontSize;
	line-height: @lineHeight;
}

Ahora, agregamos las clases .intro y .highlight al estilo LESS:

// Variables
// ---------
 
@textColor: #232323;
@textHighlight: #00214D;
@fontFamily: Helvetica, Arial, sans-serif;
@fontSize: 14px;
@lineHeight: 21px;
 
@introSize: 16px;
@introLineHeight: 24px;
@introFontVariant: small-caps;
 
// LESS for Paragraph
// ------------------
 
p {
	color: @textColor;
	font-family: @fontFamily;
	font-size: @fontSize;
	line-height: @lineHeight;
 
	.intro {
		font-variant: @introFontVariant;
		font-size: @introSize;
		line-height: @introLineHeight;
	} // End of .intro class
 
	.highlight {
		color: @textHighlight;
		font-weight: bold;
	} // End of .highlight class
 
} // End of paragraph rule

Cómodo, ¿verdad? Además, todo ese código compila en lo siguiente:

p {
  color: #222222;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
}
p .intro {
  font-variant: small-caps;
  font-size: 16px;
  line-height: 24px;
}
p .highlight {
  color: #00214d;
  font-weight: bold;
}

O, lo que es lo mismo, el código del primer ejemplo. Aunque en un principio tengamos más código con LESS que en nuestro ejemplo inicial de CSS puro, recuerda que LESS permite modificar el valor de esas variables de forma muy rápida. Además, ambos sabemos que una web no son sólo esos tres párrafos, ¿verdad?

Espera, yo no quiero que esto afecte a toda la jerarquía, ¿Qué hago?

Buena pregunta y fácil de contestar. Si quieres que tu clase intro sea leída como p.intro en vez de p .intro (nótese el espacio), simplemente añade un & (ampersand) antes de tu «regla necesaria».

// LESS for Paragraph
// ------------------
 
p {
	color: @textColor;
	font-family: @fontFamily;
	font-size: @fontSize;
	line-height: @lineHeight;
 
	&.intro {
		font-variant: @introFontVariant;
		font-size: @introSize;
		line-height: @introLineHeight;
	}
 
	.highlight {
		color: @textHighlight;
		font-weight: bold;
	}
 
}

Cuya compilación es:

p {
  color: #222222;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
}
p.intro {
  font-variant: small-caps;
  font-size: 16px;
  line-height: 24px;
}
p .highlight {
  color: #00214d;
  font-weight: bold;
}

Es importante este punto, porque a veces necesitamos modificar el operador hijo. Otras veces sólo buscamos apuntar a ciertos elementos con ciertas clases.

En resumidas cuentas, sin el &, afectará a todas las clases .intro. Con él (con el ampersand), afectará únicamente a los párrafos que lleven la clase intro.

¿Y ahora qué?

Pues ahora finalizamos este tutorial para dar paso al siguiente, donde aprenderemos sobre funciones y operadores. Permanece atento a la siguiente entrega.

Si te gusta esta entrada o tienes dudas, no dudes en dejar un comentario. Además, no olvides tuitearlo, compartirlo en Facebook o donde quieras; eso nos ayudará a seguir.

Derechos de imagen