Sass calculer le pourcentage moins px

133

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

— Mike Fielden
source

J'obtiens l' Invalid property valueerreur. Dans tous les navigateurs, y compris la version Canary de Chrome.

— Mike Fielden

S'il y a une fonction Sass qui me donne ce que je veux c'est cool, je jouais juste avec calc...

— Mike Fielden

Oui :) Comme je l'ai dit, je ne me soucie pas de la façon dont cela se fait, calcc'était où je suis allé en premier et cela n'a pas fonctionné. Il semble que cela ne calcfonctionne dans aucun de mes navigateurs, donc une implémentation sass serait préférable, je suppose.

— Mike Fielden

1

Sass ne peut pas servir de polyfill pour calc (). Il ne sait pas comment convertir 25% en px pour pouvoir faire le calcul et générer le CSS. En fonction de vos besoins exacts, il peut y avoir une alternative, telle que l'utilisation de la famille des tables d'affichage, la modification de la taille de votre boîte ou l'utilisation de marges négatives ( jsfiddle.net/5JZGt )

— cimmanon

239

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});
}

— chrisgonzalez
source

5

Je dirais que calc () ne fonctionne pas du tout dans la plupart des navigateurs. Les plates-formes mobiles sont tout aussi importantes que les ordinateurs de bureau.

— dalgard

3

Aucun argument là-bas, mais comptez les navigateurs! Plus de support calc () que non, et encore plus le supportera dans un proche avenir!

— chrisgonzalez

5

J'ai eu des problèmes largeur à l' aide d' une variable à l' intérieur des fonctions calco, mais trouve ici: stackoverflow.com/questions/13542164/... que je pourrais faire référence à la variable comme ceci: calc(25% - #{$var}).

— mlunoe

Pour donner suite à la déclaration de @ dalgard, en ce qui concerne les navigateurs existants et publiés, calc ne fonctionne pas plus qu'il ne fonctionne. Voir: caniuse.com/#search=calc

— imjared le

3

Vous pouvez toujours utiliser une option de repli en ajoutant width: 22%au-dessus de tout widths aveccalc

— Hengjie

23

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)"); }

— Sandstrom
source

14

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

— Edwin Fernando Marroquin Busto
source

2

Merci d'avoir publié une réponse à cette question! Les réponses basées uniquement sur le code sont déconseillées sur Stack Overflow, car un vidage de code sans contexte n'explique pas comment ni pourquoi la solution fonctionnera, ce qui rend difficile pour l'affiche d'origine (ou les futurs lecteurs) de comprendre la logique qui la sous-tend. Veuillez modifier votre question et inclure une explication de votre code afin que d'autres puissent bénéficier de votre réponse. Merci!

— Maximillian Laumeister

Cela m'a sauvé. width: unquote ("calc (100% - # {$ leftnav-width})");

— httpete

5

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.

— Conception par Adrian
source

2

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.

— Bryce Gilhome
source

1

y a-t-il un mélange moins ou sass pour cela quelque part? calc ne semble pas du tout fonctionner très bien.

— v3nt

0

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

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

— Aftab Ahmed
source