Tutorial de LESS: Reglas necesarias

less is more

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

3 comentarios en “Tutorial de LESS: Reglas necesarias

  1. Estupendo Tutorial, lo voy siguiendo desde el inicio.
    Sólo tengo una duda y quizá es porque nunca lo manejé así... ¿Podrías explicarme la diferencia entre p.intro y p .intro (Espacio "intro")? con un ejemplo práctico. Si bien los hijos los he manipulado de otra manera, el asunto del espacio no me ha quedado muy claro.
    Gracias por tus tutoriales, son excelentes.
    ¡Saludos!

    1. Hola Edgar,
      la diferencia básica es clara:

      • p.intro aplica los estilos indicados a todos los párrafos que tengan la clase "intro" declarada. Aplicaría estilos a <p class="intro">Aquí sí</p/gt; pero no a <p class="otra-clase">Aquí no</p>
      • p .intro (con espacio) aplica los estilos a todas las etiquetas html que tengan la clase intro y estén declaradas dentro de un párrafo. Por ejemplo: <p class="aqui-no">Estamos declarando un <span class="intro">Párrafo</span> todo guapo.</p>
      • -> Sólo afectaría al span que dice "Párrafo".

      Espero que lo entiendas con los ejemplos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información