Variables de estilo LESS CSS

765 Insertado en Personalización avanzada

Es posible combinar estilos gracias a las variables de estilo LESS CSS que tenemos implementadas. Antes de realizar este tipo de acciones, necesitarás tener unos conocimientos mínimos o estar familiarizado con las hojas de estilo CSS.

Variables de familia tipográfica (font-family)

En la sección diseño, podrás definir estilos de fuente y tamaño para encabezados (h1, h2, h3, etc…) y párrafos (p).

Si por ejemplo quieres utilizar el “font-family” del encabezado “h1” sería de la siguiente forma:

font-family: @h1-font-family;

Si por el contrario quisieras utilizar el del h3 o el párrafo, tan solo tienes que cambiar el valor en la clase.

Variables de tamaño (font-size)

Igual pasaría con el tamaño de la fuente, si por ejemplo quieres utilizar el “font-size” del encabezado “h1” sería de la siguiente forma:

font-size: @h1-font-size;

Aquí inclusive puedes ir más allá sumando y restando valores, es decir, si quieres utilizar 2 píxeles menos que el tamaño del h1 tendrías que añadir un “- 2” al final:

font-size: @p-font-size - 2;

También puedes aumentar valores cambiando el - por un +.

Variables de color

También es posible obtener colores utilizando variables de color, por ejemplo, si queremos utilizar el color de los párrafos sería algo así:

color: @p-color;

Si por el contrario, lo que deseas es el color de los encabezados cambiando la “p” por una “h” lo consigues.

 

¿Te ha sido útil?

¿Necesitas más ayuda?

Contacta con nosotros