wake-up-neo.net

Sass-Variable in der Funktion calc () von CSS

Ich versuche, die Funktion calc() 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 anstelle meiner 50px-Variablen das Literal body_padding verwende, bekomme ich genau das, was ich will. Wenn ich jedoch auf die Variable umschalte, ist dies die Ausgabe:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

Wie kann ich Sass dazu bringen, zu erkennen, dass es die Variable innerhalb der calc-Funktion ersetzen muss?

csscss3sasscss-calc
920
GJK

Interpolieren:

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

Für diesen Fall würde border-box auch ausreichen:

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

So verwenden Sie $variables in Ihrer calc() der height-Eigenschaft

Html

<div></div>

Scss

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}
13
Joao DA SILVA MARLY

Ich habe es ausprobiert und dann mein Problem behoben. Alle Medien-Haltepunkte werden automatisch anhand der angegebenen Rate (Basisgröße/Rate-Größ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);
}
1
Serkan KONAKCI

Hier ist eine wirklich einfache Lösung, die SASS/SCSS und einen mathematischen Formelstil verwendet:

/* 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; }

Zum Schluss schlage ich Ihnen dringend vor, transform-Origin, rotate() und skew() zu verstehen:

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

1
Carl L.D.

du kannst deinen verbalen #{your verbal} verwenden

0
Girraj