Sass calcule le pourcentage moins px

Question

Je veux être en mesure de faire ce qui suit :

height: 25% - 5px;

Évidemment, lorsque je fais cela, j'obtiens l'erreur :

Incompatible units: 'px' and '%'.

Answer 1

Sass ne peut pas effectuer d'opérations arithmétiques sur des valeurs qui ne peuvent pas être converties d'une unité à l'autre. Sass n'a aucun moyen de savoir exactement quelle est la largeur de "100 %" en termes de pixels ou de toute autre unité. Seul le navigateur peut le savoir.

Vous devez utiliser calc() à la place. Vérifiez la compatibilité du navigateur sur Puis-je utiliser...

.foo {
    height: calc(25% - 5px);
}

Si vos valeurs se trouvent dans des variables, vous devrez peut-être utiliser l'interpolation pour les transformer en chaînes de caractères (sinon, Sass essaie simplement d'effectuer des calculs arithmétiques) :

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

Answer 2

Il existe un calc à la fois dans SCSS [compilation] et CSS [exécution]. Vous invoquez probablement la première au lieu de la seconde.

Pour des raisons évidentes, les unités de mélange ne fonctionneront pas à la compilation, mais elles fonctionneront à l'exécution.

Vous pouvez forcer ce dernier en utilisant unquote une fonction SCSS.

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

Answer 3

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

Answer 4

SI vous connaissez la largeur du conteneur, vous pourriez faire comme ceci :

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

Je suis conscient que dans de nombreux cas, #container peut avoir une largeur relative. Dans ce cas, cela ne fonctionnerait pas.

Answer 5

Désolé de relancer un vieux sujet, mais l'étirement de Compass avec un pseudo-sélecteur :after pourrait convenir à votre objectif. Par exemple, si vous voulez qu'un div remplisse la largeur de gauche à (50% + 10px) de l'écran, vous pourriez utiliser (dans la syntaxe indentée de SASS) :

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

L'élément :after remplit 50 % à droite de .example (laissant 50 % disponibles pour la largeur de .example), puis .example est étiré à cette largeur plus 10px.