Sass-Variable in der CSS-Funktion calc ()

1345

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 50pxanstelle meiner body_paddingVariablen 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 calcFunktion ersetzt werden muss?

css sass css-calc

— GJK
quelle

10

mögliches Duplikat von Usa eine Variable in einem Mixin

— Cimmanon

19

@ user3705055 Sie benötigen eine Berechnung, da Sass nicht 100% - 50px berechnen kann, da die Einheiten unterschiedlich sind. Dies kann nur vom Browser berechnet werden, wenn er weiß, wie groß der Container ist, um 100% in px zu konvertieren, bevor die Werte hinzugefügt werden. Dies ist der genaue Grund, warum calc existiert.

— Mog0

2543

Interpolieren :

body
    height: calc(100% - #{$body_padding})

Für diesen Fall border-Box würde auch genügen:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

— Sam
quelle

3

box-sizing: border-box;wäre meiner Meinung nach natürlich der ideale Weg. Im Allgemeinen sollte das Box-

— Größenmodell

Danke vielmals! Ich wollte gerade die CSS-Route mitcalc(100% - var(--body_padding))

— Sylar

51

So verwenden $variablesSie calc()die Eigenschaft height:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}

— Joao DA SILVA MARLY
quelle

11

Was trägt dies zur akzeptierten Antwort von vor fast 5 Jahren bei?

— random_user_name

6

Aus irgendeinem Grund finde ich diese Antwort klarer. Ich mache nicht viel SCSS-Arbeit, daher war dies "einfacher" und für mich leichter zu verstehen.

— 2b77bee6-5445-4c77-b1eb-4df3e5

4

Dies ist definitiv eine klarere Antwort als die akzeptierte. 'Interpolieren:' bedeutete mir nichts.

— Jacques Mathieu

3

@JacquesMathieu sass-lang.com/documentation/interpolation - Wenn es Ihnen nichts bedeutet und es eine Antwort mit so vielen Stimmen ist, sollten Sie wahrscheinlich verstehen, worum es geht. Nur meine zwei Cent ...

— A. Chiesa

1

@EIN. Chiesa sicher, das definiert Interpolation. Das OP und ich wussten jedoch nichts von Interpolation in SASS, sonst wäre diese Frage nie gestellt worden. Die bloße Angabe eines Wortes, das man ohne Definition oder Vorwand noch nie zuvor gehört hat, hilft also nicht, eine umfassende Antwort zu erstellen. Dieser Link ist jedoch sicherlich hilfreich. Wäre schön gewesen, das auf der akzeptierten Antwort zu sehen.

— Jacques Mathieu

9

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.

— Udit
quelle

2

Ich habe es versucht, dann habe ich mein Problem behoben. Alle Medien-Haltepunkte werden automatisch anhand der angegebenen Rate (Basisgröße / Ratengröße) berechnet.


$base-size: 16;
$rate-size-xl: 24;

    // set default size for all cases;
    :root {
      --size: #{$base-size};
    }

    // if it's smaller then LG it will set size rate to 16/16;
    // example: if size set to 14px, it will be 14px * 16 / 16 = 14px
    @include media-breakpoint-down(lg) {
      :root {
        --size: #{$base-size};
      }
    }

    // if it is bigger then XL it will set size rate to 24/16;
    // example: if size set to 14px, it will be 14px * 24 / 16 = 21px
    @include media-breakpoint-up(xl) {
      :root {
        --size: #{$rate-size-xl};
      }
    }

@function size($px) {
   @return calc(#{$px} / $base-size * var(--size));
}

div {
  font-size: size(14px);
  width: size(150px);
}

— Serkan KONAKCI
quelle

0

Hier ist eine wirklich einfache Lösung mit SASS / SCSS und einem mathematischen Formelstil:

/* frame circle */
.container {
    position: relative;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    width: 400px;
    height: 400px; }

/* circle sectors */
.menu-frame-sector {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 10000;
    transform-origin: 100% 100%;
  }

$sector_count: 8;
$sector_width: 360deg / $sector_count;

.sec0 {
    transform: rotate(0 * $sector_width) skew($sector_width);
    background-color: red; }
.sec1 {
    transform: rotate(1 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec2 {
    transform: rotate(2 * $sector_width) skew($sector_width);
    background-color: red; }
.sec3 {
    transform: rotate(3 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec4 {
    transform: rotate(4 * $sector_width) skew($sector_width);
    background-color: red; }
.sec5 {
    transform: rotate(5 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec6 {
    transform: rotate(6 * $sector_width) skew($sector_width);
    background-color: red; }
.sec7 {
    transform: rotate(7 * $sector_width) skew($sector_width);
    background-color: blue; }

Abschließend empfehle ich Ihnen sehr zu verstehen transform-origin, rotate()und skew():

https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

— Carl LD
quelle

-2

Sie können Ihre verbale verwenden #{your verbal}

— Girraj
quelle

3

Dies scheint eine seltsame Antwort zu sein. Ich nehme an, Sie meinen, variableaber wenn das OP weiß, was eine Variable ist (sie geben $body_paddingin ihrem Code an), was fügt Ihre Antwort hinzu?

— Mike Poole

Ich habe Antwort gegeben

— Girraj

-6

Versuche dies:

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}

— Mas Hary
quelle

3

Wie ist das besser als die oben akzeptierte Antwort? Es scheint nicht einmal dasselbe zu tun ...?

— Jules