Soustraction de Pixels De Pourcentage en SASS?

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;
}
InformationsquelleAutor realph | 2012-05-18
  1. 2

    Je ne vois pas comment cela pourrait même travail, le fait est SASS peut pas comme par magie connaître la taille de votre zone de.

    Maintenant, si j'obtiens ce que vous essayez de faire, la meilleure solution serait de les emballer .parent de la boîte de largeur dans une variable et ensuite, il suffit de soustraire votre largeur de l'image de cette variable - compte tenu de largeur 100% signifie qu'il sera à 100% d'une certaine largeur.

    • calc() est la magie qui sass manquait. Cette réponse n'est plus correct.
    • Dire que la réponse est "plus correct" n'est pas tout à fait vrai: le Sass pas soustraction de pixels à partir de pourcentages/em/rem/vh/vw/etc. calc() est une fonctionnalité de CSS, pas de Sass.
    • C'est un peu serviable distinction à faire, de souligner que sass ne peut pas faire une chose, lorsque l'objectif est de mettre en œuvre cette chose dans le css. Utilisation de sass est juste un supplément de complexité pour le style, et l'Aperçu de la réponse traite de la complexité.
    • est une distinction importante à faire, surtout si le but est de stocker la valeur dans une variable, pour d'autres calculs (pas obligatoire dans le cas des OP, mais cette question et ses réponses ne sont pas seulement pour l'OP). Je n'ai pas dit que l'Aperçu de la réponse est incorrecte, c'est juste que votre déclaration n'est pas tout à fait vrai ou exactes. Je suis d'accord, cependant, que cette réponse est incomplètes
    InformationsquelleAutor Maxime Fabre
  2. 19

    Vous pouvez utiliser le 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 de le faire fonctionner sur plusieurs versions de navigateur avec la-webkit et -moz 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}");
}
    InformationsquelleAutor Balthazar