Ich versuche, die calc()
Funktion in einem Sass-Stylesheet zu verwenden, habe jedoch einige Probleme. Hier ist mein Code:
$body_padding: 50px
body
padding-top: $body_padding
height: calc(100% - $body_padding)
Wenn ich das Literal 50px
anstelle meiner body_padding
Variablen verwende, bekomme ich genau das, was ich will. Wenn ich jedoch zur Variablen wechsle, ist dies die Ausgabe:
body {
padding-top: 50px;
height: calc(100% - $body_padding); }
Wie kann ich Sass erkennen lassen, dass die Variable innerhalb der calc
Funktion ersetzt werden muss?
Antworten:
Interpolieren :
Für diesen Fall border-Box würde auch genügen:
quelle
box-sizing: border-box;
wäre meiner Meinung nach natürlich der ideale Weg. Im Allgemeinen sollte das Box-calc(100% - var(--body_padding))
So verwenden
$variables
Siecalc()
die Eigenschaft height:HTML:
SCSS:
quelle
Auch wenn es nicht direkt verwandt ist. Ich habe jedoch festgestellt, dass der CALC-Code nicht funktioniert, wenn Sie die Leerzeichen nicht richtig einfügen.
Das hat bei mir also nicht funktioniert
calc(#{$a}+7px)
Aber das hat funktioniert
calc(#{$a} + 7px)
Ich habe irgendwann gebraucht, um das herauszufinden.
quelle
Ich habe es versucht, dann habe ich mein Problem behoben. Alle Medien-Haltepunkte werden automatisch anhand der angegebenen Rate (Basisgröße / Ratengröße) berechnet.
quelle
Hier ist eine wirklich einfache Lösung mit SASS / SCSS und einem mathematischen Formelstil:
Abschließend empfehle ich Ihnen sehr zu verstehen
transform-origin
,rotate()
undskew()
:https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
quelle
Sie können Ihre verbale verwenden
#{your verbal}
quelle
variable
aber wenn das OP weiß, was eine Variable ist (sie geben$body_padding
in ihrem Code an), was fügt Ihre Antwort hinzu?Versuche dies:
quelle