Sass berechnet Prozent minus px

132

Ich möchte Folgendes tun können:

height: 25% - 5px;

Wenn ich das mache, bekomme ich natürlich den Fehler: 

Incompatible units: 'px' and '%'.
sass Mike Fielden
quelle
Ich bekomme den Invalid property valueFehler. In jedem Browser, einschließlich Chrome's Canary Build.
Mike Fielden
Wenn es eine Sass-Funktion gibt, die mir das bringt, was ich will, ist das cool, ich habe nur mit calc... gespielt
Mike Fielden
Ja :) Wie ich schon sagte, es ist mir egal, wie es gemacht wird, calcwenn ich zuerst ging und es nicht funktionierte. Es sieht calcso aus, als würde es in keinem meiner Browser funktionieren, daher wäre eine Sass-Implementierung am besten, würde ich vermuten.
Mike Fielden
1
Sass kann nicht als Polyfill für calc () fungieren. Es weiß nicht, wie man 25% in px konvertiert, damit es rechnen und das CSS generieren kann. Abhängig von Ihren genauen Anforderungen kann es eine Alternative geben, z. B. die Verwendung der Anzeigetabellenfamilie, das Ändern der Boxgröße oder die Verwendung negativer Ränder ( jsfiddle.net/5JZGt )
cimmanon

Antworten:

238

Sass kann keine Arithmetik für Werte ausführen, die nicht von einer Einheit zur nächsten konvertiert werden können. Sass kann nicht genau wissen, wie breit "100%" in Bezug auf Pixel oder andere Einheiten ist. Das weiß nur der Browser.

Sie müssen calc()stattdessen verwenden. Überprüfen Sie die Browserkompatibilität auf Kann ich verwenden ...

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

Wenn sich Ihre Werte in Variablen befinden, müssen Sie sie möglicherweise durch Interpolation in Zeichenfolgen umwandeln (andernfalls versucht Sass nur, eine Arithmetik durchzuführen):

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

.foo {
  width: calc(#{$a} - #{$b});
}
chrisgonzalez
quelle
5
Ich würde sagen, dass calc () in den meisten Browsern überhaupt nicht funktioniert. Mobile Plattformen sind genauso wichtig wie Desktops.
Dalgard
3
Kein Argument da, aber die Browser zählen! Mehr Unterstützung calc () als nicht, und noch mehr werden es in naher Zukunft unterstützen!
Chrisgonzalez
5
Ich hatte Probleme mit der Breite mithilfe einer Variablen in den Berechnungsfunktionen, fand sie jedoch hier: stackoverflow.com/questions/13542164/… , damit ich auf die Variable wie folgt verweisen kann : calc(25% - #{$var}).
mlunoe
Um die Aussage von @ dalgard in Bezug auf vorhandene, freigegebene Browser weiterzuverfolgen,
funktioniert
3
Sie können immer eine width: 22%widthcalc
Fallback-
23

Es gibt eine calcFunktion sowohl in SCSS [Kompilierungszeit] als auch in CSS [Laufzeit]. Sie rufen wahrscheinlich das erstere anstelle des letzteren auf.

Aus offensichtlichen Gründen funktionieren Mischeinheiten nicht zur Kompilierungszeit, sondern zur Laufzeit.

Sie können Letzteres mithilfe unquoteeiner SCSS-Funktion erzwingen .

.selector { height: unquote("-webkit-calc(100% - 40px)"); }
Sandstrom
quelle
14 
$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}
Edwin Fernando Marroquin Busto
quelle
2
Vielen Dank für die Beantwortung dieser Frage! Von Nur-Code-Antworten wird bei Stack Overflow abgeraten, da ein Code-Dump ohne Kontext nicht erklärt, wie oder warum die Lösung funktioniert, was es dem Originalposter (oder zukünftigen Lesern) erschwert, die dahinter stehende Logik zu verstehen. Bitte bearbeiten Sie Ihre Frage und geben Sie eine Erklärung Ihres Codes an, damit andere von Ihrer Antwort profitieren können. Vielen Dank!
Maximillian Laumeister
Das hat mich gerettet. width: unquote ("calc (100% - # {$ leftnav-width})");
httpete
5

Wenn Sie die Breite des Containers kennen, können Sie Folgendes tun:

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

Mir ist bewusst, dass #container in vielen Fällen eine relative Breite haben kann. Dann würde das nicht funktionieren.

Design von Adrian
quelle
2

Entschuldigen Sie die Wiederbelebung des alten Threads - Compass 'Stretch mit einem: After-Pseudo-Selektor könnte Ihrem Zweck entsprechen - z. Wenn Sie möchten, dass ein Div die Breite von links bis (50% + 10px) des Bildschirms ausfüllt, können Sie Folgendes verwenden (in SASS-eingerückter Syntax):

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

Das Element: after füllt 50% rechts von .example (wobei 50% für die Breite von .example verfügbar bleiben), dann wird .example auf diese Breite plus 10px gestreckt.

Bryce Gilhome
quelle
1
Gibt es dafür irgendwo weniger oder weniger? calc scheint überhaupt nicht sehr gut zu funktionieren.
v3nt
0

Fügen Sie einfach den Prozentwert zu einer Variablen hinzu und verwenden Sie ihn #{$variable} beispielsweise

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