Variable Sass dans la fonction CSS calc ()


1347

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?


10
doublon possible d' Usa a Variable dans un Mixin
cimmanon

19
@ user3705055 Vous avez besoin de calc car Sass ne peut pas calculer 100% - 50px car les unités sont différentes. Cela ne peut être calculé que par le navigateur, une fois qu'il connaît la taille du conteneur afin de convertir 100% en px avant d'ajouter les valeurs. C'est la raison exacte pour laquelle calc existe.
Mog0

Réponses:


2545

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

3
box-sizing: border-box;serait la voie idéale à suivre, à mon avis, bien sûr. En général, le modèle de dimensionnement de boîte devrait faire t
Brandito

Merci beaucoup! J'étais sur le point de suivre la route css aveccalc(100% - var(--body_padding))
Sylar

51

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

11
Qu'est-ce que cela ajoute à la réponse acceptée il y a près de 5 ans?
random_user_name

6
Pour une raison quelconque, je trouve cette réponse plus claire. Je ne fais pas beaucoup de travail scss, donc c'était plus simple et plus facile à comprendre.
2b77bee6-5445-4c77-b1eb-4df3e5

4
C'est certainement une réponse plus claire que celle acceptée. «Interpoler:» ne signifiait rien pour moi.
Jacques Mathieu

3
@JacquesMathieu sass-lang.com/documentation/interpolation - Si cela ne vous dit rien et que c'est une réponse avec autant de votes, vous devriez probablement comprendre de quoi il s'agit. Juste mes deux cents ...
A. Chiesa

1
@UNE. Chiesa bien sûr, cela définit l'interpolation. Cependant l'OP et moi ne connaissions pas d'interpolation dans SASS, sinon cette question n'aurait jamais été posée. Ainsi, le simple fait d'énoncer un mot que l'on n'a peut-être jamais entendu auparavant sans définition ni prétention n'aide pas à créer une réponse globale. Ce lien est certainement utile cependant. Cela aurait été bien de voir cela sur la réponse acceptée.
Jacques Mathieu

9

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.


2

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

0

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/


-2

vous pouvez utiliser votre verbal #{your verbal}


3
Cela semble être une réponse étrange. Je suppose que vous voulez dire variablemais étant donné que l'OP sait ce qu'est une variable (ils spécifient $body_paddingdans leur code) qu'est-ce que votre réponse ajoute?
Mike Poole

J'ai donné une réponse
Girraj

-6

Essaye ça:

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

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

3
Comment est-ce mieux que la réponse acceptée ci-dessus? Il ne semble même pas faire la même chose ...?
Jules
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.