Sass calculer le pourcentage moins px

Je souhaite pouvoir effectuer les opérations suivantes:

height: 25% - 5px;

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

Incompatible units: 'px' and '%'.

Sass ne peut pas effectuer d'arithmétique 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é. C'est quelque chose que seul le navigateur sait.

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

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

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

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

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

Il existe une calcfonction à la fois dans SCSS [compile-time] et CSS [run-time]. Vous invoquez probablement le premier au lieu du second.

Pour des raisons évidentes, les unités de mixage ne fonctionneront pas à la compilation, mais le seront à l'exécution.

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

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

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

SI vous connaissez la largeur du conteneur, vous pouvez 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. Alors ça ne marcherait pas.

Désolé d'avoir ravivé l'ancien fil - l'étirement de la boussole 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 pouvez utiliser (dans la syntaxe indentée 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% disponible pour la largeur de .example), alors .example est étiré à cette largeur plus 10px.

Ajoutez simplement la valeur en pourcentage dans une variable et utilisez #{$variable} par exemple

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}