Variables de estilo LESS CSS

254 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?

¿No encuentras lo que andas buscando?

Te ayudaremos o te pondremos en contacto con un experto

Contáctanos