Soustraction de Pixels De Pourcentage en SASS?

Question

Je sais que vous êtes en mesure de faire quelques calculs simples dans Sass/Scss.Mais est-il un moyen de soustraction de pixels à partir de pourcentages?Par exemple:

$image-size: 200px;

.bio {
    width: 100% - $image-size;
}

Answer 1

Je ne vois pas comment cela fonctionnerait même, le fait est que SASS ne peut pas savoir par magie la taille de votre boîte.

Maintenant si j'obtiens ce que vous essayez de faire, la meilleure solution consisterait à envelopper la largeur des parents de la Boîte à la variable et à substituer la largeur de votre image sur cette variable - Considérant 100% de largeur signifie que cela obtiendra 100% descertaine largeur.

Answer 2

Vous pouvez utiliser l' calc() fonction pour obtenir ce que vous voulez.C'est expérimental, mais encore assez bien pris en charge par les différents navigateurs.

Avec Sass, vous pouvez créer un calc mixin pour obtenir ce travail sur plusieurs versions de navigateur avec l'-webkit et -moz les préfixes (pas besoin de le Opéra un):

@mixin calc($key, $value) {
  #{$key}: -webkit-calc(#{$value});
  #{$key}: -moz-calc(#{$value});
  #{$key}: calc(#{$value});
}

Et de l'appeler avec quelque chose comme:

.bio {
  @include calc("width", "100% - #{$image-size}");
}