HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

LESS: mixin para convertir automáticamente de "pixels" a "ems"

{Less} es un lenguaje que añade a CSS capacidades propias de los lenguajes dinámicos mediante variables, funciones y operaciones sobre los selectores, las propiedades y los valores de las hojas de estilo.

En esta ocasión, vamos a ver cómo podemos utilizar {Less} para automatizar la tarea de definir tamaños con la unidad de medida relativa em.

He visto este ejemplo en IFDattic, se trata de un mixin para calcular automáticamente la división de pixels oportuna y generar el valor correspondiente en formato relativo. Aplicado a los tamaños de fuente es un ejemplo muy claro, aunque lógicamente vale para cualquier propiedad que queramos usar (márgenes, paddings, etc…)

Situación a resolver:

En el ejemplo la situación es que tenemos un tamaño de fuente base de 15 pixels. En la caja con la clase .nav queremos que la fuente sea de 11 pixels y para los títulos de primer nivel queremos tamaño 30 pixels. Pero no queremos expresarlo en valores fijos sino en ems, en valores relativos.

Si lo hacemos manualmente, tenemos que dividir el tamaño objetivo por el tamaño base. Es decir, para los títulos de nivel 1, sería: 30 pixels / 15 pixels = 2 ems.

Podemos generar un mixin para el tamaño de la fuente de la siguiente forma:

[css]
@basefont: 15; /* Tamaño base de la fuente: 15 pixels */

/* Mixin para el cálculo automático */
.font-size( @target: @basefont, @default: @basefont ) {
font-size: (@target / @default) 0em;
}
[/css]

La clave está en que los valores que se le pasan al mixin siempre sean números sin especificar la unidad y al final sumarle un cero con la unidad a la que se quiere convertir. Así podremos aplicar el mixin en nuestro fichero {Less} fácilmente:

[css]
.nav{
.font-size(11); /* Tamaño 11 pixels transformados a ems /
}
h1{
.font-size(30); /
Tamaño 30 pixels transformados a ems */
}
[/css]

En este ejemplo, el código CSS final generado por {Less}, con las unidades de medida ya convertidas, será este:

[css]
.nav {
font-size: 0.733333333em;
}
h1 {
font-size: 2em;
}
[/css]

Hala, ya puedes minimizar la calculadora, :P

Enlace: