Convertir px pour em en Moins

Avec MOINS vous pouvez créer vos propres fonctions. J'utilise cette fonction avec le grunt-contrib-moins de package. La mise en forme est légèrement différent de l'habituel, moins les fonctions de mise en forme. Remarque: vous devez insérer du moins comme un paramètre avec ce package.

em: function(less, fontsize, basefontsize){
    if (less.functions.functionRegistry.get('ispixel')){
        basefontsize = (basefontsize) ? basefontsize.value : 16
        return fontsize.value/basefontsize+'em';
    }
}

Maintenant, vous pouvez simplement appeler cette fonction dans votre MOINS les feuilles de style comme

.class{
    font-size:em(16px);
}

Qui permettra de compiler pour

.class{
    font-size:1em;
}

Note ems sera toujours par rapport au conteneur du css. De sorte que la taille de police de cadratin (1 em ne sera pas 16px si l'emballage div a une police-taille de l'ensemble de 0.8 em par exemple.

Mise à jour: Le non-grunt-contrib-moins la version

Si vous le mettez dans un fichier javascript qui vous inclure dans votre code html avant votre moins de fichiers, vous pouvez utiliser la fonction comme indiqué ci-dessus.

$.extend(less.functions, {
    em: function(fontsize, basefontsize){
        if (this.ispixel(fontsize)){
            basefontsize = (basefontsize) ? basefontsize.value : 16
            return new(tree.Dimension)(fontsize.value/basefontsize,'em');
        }
    }
}

Si vous êtes à la compilation de votre MOINS sur le côté serveur, et personnellement, je ne ferais jamais sinon vous pouvez le faire avec MOINS de mixin et pas de fonctions personnalisées.

Évidemment, cela signifie que vous ne pouvez pas calculer automatiquement, basée sur la taille du noeud courant, mais thwat un petit sondage effrayant pour moi. Voici une autre façon de convertir les pixels en ems.

Mondial des moins de mixin

@emInPx: 16;    //16px per em (global default)

.convertEm(@selector, @amt) when (isem(@amt))
{
    @{selector}: @amt;
}
.convertEm(@selector, @amt, @emInPx: @emInPx) when (ispixel(@amt))
{
    @{selector}: unit((@amt / @emInPx), em);
}

Exemple d'utilisation

img.cat
{
    .convertEm(max-width, 5em);
    .convertEm(max-height, 3em);
}
img.dog
{
    .convertEm(max-width, 100px);
    .convertEm(max-height, 75px);
}

Noter que j'utilise la même .convertEm(..) mixin pour les deux pixels et des ems, puisque vous ne pouvez même pas savoir si la valeur est passée en paramètre. Le surveillé mixin reprend correctement la bonne formule pour convertir.

Cela génère cette css

img.cat {
  max-width: 5em;
  max-height: 3em;
}
img.dog {
  max-width: 6.25em;
  max-height: 4.6875em;
}

Tout cela suppose cadratin (1 em correspond à 16px. Si non, vous pouvez modifier la valeur par défaut ou de le transmettre selon le contexte, vous êtes dans:

img.mouse
{
    .convertEm(max-width, 100px, 32px);
    .convertEm(max-height, 75px, 32px);
}

Avertissement: je n'ai toujours pas pleinement comprendre comment ou si le serveur a généré MOINS d'ouvrages peuvent travailler avec la coutume des fonctions javascript donc je suppose que lorsque vous générez côté serveur, vous ne pouvez pas ajouter des fonctions personnalisées. Si je me trompe s'il vous plaît quelqu'un faites le moi savoir!