Variable Sass dans la fonction CSS calc ()

J'essaie d'utiliser la calc()fonction dans une feuille de style Sass, mais j'ai des problèmes. Voici mon code:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

Si j'utilise le littéral 50pxau lieu de ma body_paddingvariable, j'obtiens exactement ce que je veux. Cependant, lorsque je passe à la variable, voici la sortie:

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

Comment puis-je faire en sorte que Sass reconnaisse qu'il doit remplacer la variable dans la calcfonction?

Interpoler :

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

Dans ce cas, border-box suffirait également:

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

Pour utiliser à l' $variablesintérieur de votre calc()propriété de hauteur:

HTML:

<div></div>

SCSS:

$a: 4em;

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

Même si ce n'est pas directement lié. Mais j'ai trouvé que le code CALC ne fonctionnera pas si vous ne mettez pas correctement les espaces.

Donc ça n'a pas marché pour moi calc(#{$a}+7px)

Mais cela a fonctionné calc(#{$a} + 7px)

Ça m'a pris un moment pour comprendre ça.

J'ai essayé cela, puis j'ai résolu mon problème. Il calculera automatiquement tous les points d'arrêt média par un taux donné (taille de base / taille de taux)

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

Voici une solution vraiment simple utilisant SASS / SCSS et un style de formule mathématique:

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

Pour conclure, je vous suggère fortement de comprendre transform-origin, rotate()et skew():

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

vous pouvez utiliser votre verbal #{your verbal}

Essaye ça:

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

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