Moins: Mixin pour convertir automatiquement les "pixels" de "EMS"

{} Moins est un langage qui ajoute des capacités inhérentes CSS langages dynamiques en utilisant des variables, fonctions et opérations des sélecteurs, des propriétés et des valeurs des feuilles de style.

Cette fois, nous allons voir comment nous pouvons utiliser {} Moins d'automatiser la tâche de définir les tailles d'unité mesure relative em.

J'ai vu cet exemple dans IFDattic , c'est un mixin pour calculer automatiquement la division appropriée pixels et générer de la valeur correspondante en format relatif. Appliquée à des tailles de police est un exemple très clair, mais s'applique évidemment à tous les biens que nous voulons utiliser (les marges, padding, etc ...)

Situation à résoudre:

Dans l'exemple, la situation est que nous avons une taille de police de base de 15 pixels. Dans la boîte avec la classe .nav voulez que la source soit 11 pixels et les titres que nous voulons classe de taille 30 pixels . Mais nous ne l'expriment pas dans les valeurs EMS fixe, mais, en valeur relative.

Si nous le faire manuellement, il faut diviser la taille cible de base de la taille. C'est, pour le niveau 1 des titres seraient: 30 pixels / 15 pixels = 2 ems .

Nous pouvons générer un mixin pour la taille de la police comme suit:

@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;
}

La clé est que les valeurs passées à la mixin sont toujours des nombres sans spécifier l'unité et ajouter un zéro à la fin de l'entraînement que vous souhaitez convertir. Ensuite, nous pouvons appliquer le mixin dans notre fichier} {Moins facilement:

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

Dans cet exemple, le code final CSS généré par {Moins}, avec des unités de mesure converties, est la suivante:

.nav {
    font-size: 0.733333333em;
}
h1 {
    font-size: 2em;
}

Hala, maintenant vous pouvez minimiser la calculatrice,: P

Lien:

• IFDattic: px à EMS convertir avec moins
• {} Moins