Sass Variabile nella funzione calc () CSS


1347

Sto cercando di utilizzare la calc()funzione in un foglio di stile Sass, ma sto riscontrando alcuni problemi. Ecco il mio codice:

$body_padding: 50px

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

Se uso il letterale 50pxanziché la mia body_paddingvariabile, ottengo esattamente quello che voglio. Tuttavia, quando passo alla variabile, questo è l'output:

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

Come posso far riconoscere a Sass che deve sostituire la variabile all'interno della calcfunzione?


10
possibile duplicato di Usa a Variable in a Mixin
cimmanon

19
@ user3705055 È necessario calc poiché Sass non può calcolare il 100% - 50px poiché le unità sono diverse. Questo può essere calcolato solo dal browser, una volta che sa quanto è grande il contenitore per convertire il 100% in px prima di aggiungere i valori. Questo è il motivo esatto per cui esiste calc.
Mog0

Risposte:


2544

Interpolare :

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

In questo caso, border-box sarebbe anche sufficiente:

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

3
box-sizing: border-box;sarebbe il modo ideale di procedere, secondo me, ovviamente. In generale, il modello di dimensionamento delle scatole dovrebbe essere t
Brandito il

Grazie molto! Stavo per seguire il percorso css concalc(100% - var(--body_padding))
Sylar

51

Per utilizzare la proprietà della $variablestua calc()altezza:

HTML:

<div></div>

SCSS:

$a: 4em;

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

11
Cosa aggiunge questo alla risposta accettata di circa 5 anni fa?
random_user_name

6
Per qualche motivo, trovo questa risposta più chiara. Non faccio molto lavoro scss, quindi questo è stato "più semplice" e più facile per me capire.
2b77bee6-5445-4c77-b1eb-4df3e5

4
Questa è sicuramente una risposta più chiara di quella accettata. "Interpolare:" non significava niente per me.
Jacques Mathieu,

3
@JacquesMathieu sass-lang.com/documentation/interpolation - Se non significa niente per te ed è una risposta con così tanti voti, probabilmente dovresti capire di cosa si tratta. Solo i miei due centesimi ...
A. Chiesa,

1
@UN. Chiesa certo, questo definisce l'interpolazione. Tuttavia, l'OP e io non sapevamo dell'interpolazione in SASS, altrimenti questa domanda non sarebbe mai stata posta. Pertanto, solo affermare una parola che non si sarebbe mai sentito prima senza una definizione o una pretesa non aiuta a creare una risposta inclusiva. Quel link è sicuramente utile però. Sarebbe stato bello vederlo sulla risposta accettata.
Jacques Mathieu,

9

Anche se non è direttamente correlato. Ma ho scoperto che il codice CALC non funzionerà se non si inseriscono correttamente gli spazi.

Quindi questo non ha funzionato per me calc(#{$a}+7px)

Ma ha funzionato calc(#{$a} + 7px)

Mi ha richiesto qualche volta per capirlo.


2

Ho provato questo, quindi ho risolto il mio problema. Calcolerà automaticamente tutti i punti di interruzione dei media in base alla velocità specificata (dimensione di base / dimensione della frequenza)


$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

Ecco una soluzione davvero semplice che utilizza SASS / SCSS e uno stile di formula matematica:

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

Per concludere, vi consiglio caldamente di capire transform-origin, rotate()e skew():

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


-2

puoi usare il tuo verbale #{your verbal}


3
Sembra una risposta strana. Presumo tu intenda, variablema dato che l'OP sa cos'è una variabile (specificano $body_paddingnel loro codice) cosa aggiunge la tua risposta?
Mike Poole,

Ho una risposta
Girraj,

-6

Prova questo:

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

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

3
In che modo è meglio della risposta accettata sopra? Non sembra nemmeno fare la stessa cosa ...?
Jules il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.