Zmienna Sass w funkcji CSS calc ()

1343

Próbuję użyć tej calc()funkcji w arkuszu stylów Sass, ale mam pewne problemy. Oto mój kod:

$body_padding: 50px

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

Jeśli użyję literału 50pxzamiast mojej body_paddingzmiennej, otrzymam dokładnie to, czego chcę. Jednak po przełączeniu na zmienną jest to wynik:

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

Jak sprawić, by Sass rozpoznał, że musi zastąpić zmienną w calcfunkcji?

GJK
źródło
10
możliwy duplikat Usa a Variable in a Mixin
cimmanon
19
@ user3705055 Potrzebujesz kalkulatora, ponieważ Sass nie może obliczyć 100% - 50 pikseli, ponieważ jednostki są różne. Może to zostać obliczone tylko przez przeglądarkę, gdy tylko dowie się, jak duży jest pojemnik, aby przekonwertować 100% na px przed dodaniem wartości. Właśnie z tego powodu istnieje kalkulator.
Mog0

Odpowiedzi:

2541

Interpolacja :

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

W tym przypadku wystarczy również ramka :

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding
sam
źródło
3
box-sizing: border-box;byłby, moim zdaniem, idealnym sposobem na przejście. Ogólnie rzecz biorąc, model rozmiaru pudełka powinien mieć wartość t
Brandito
Wielkie dzięki! Już miałem iść na trasę css zcalc(100% - var(--body_padding))
Sylar
51

Aby użyć $variableswewnątrz calc()właściwości wysokości:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}
Joao DA SILVA MARLY
źródło
11
Co to dodaje do zaakceptowanej odpowiedzi sprzed prawie 5 lat?
random_user_name
6
Z jakiegoś powodu uważam tę odpowiedź za bardziej zrozumiałą. Nie wykonuję dużo pracy scss, więc było to „prostsze” i łatwiejsze do zrozumienia.
2b77bee6-5445-4c77-b1eb-4df3e5
4
Jest to zdecydowanie jaśniejsza odpowiedź niż zaakceptowana. „Interpolate:” nic dla mnie nie znaczyło.
Jacques Mathieu,
3
@JacquesMathieu sass-lang.com/documentation/interpolation - Jeśli to nic dla ciebie nie znaczy i jest to odpowiedź z tyloma głosami, prawdopodobnie powinieneś zrozumieć, o co to zamieszanie. Tylko moje dwa centy ...
A. Chiesa
1
@ZA. Chiesa jasne, że definiuje interpolację. Jednak OP i ja nie wiedzieliśmy o interpolacji w SASS, w przeciwnym razie nigdy nie zadałoby się tego pytania. Zatem samo określenie słowa, którego nikt wcześniej nie słyszał bez definicji lub udawania, nie pomaga w stworzeniu odpowiedzi obejmującej wszystkie osoby. Ten link jest jednak z pewnością pomocny. Byłoby miło to zobaczyć na przyjętej odpowiedzi.
Jacques Mathieu,
9

Mimo że nie jest to bezpośrednio powiązane. Odkryłem jednak, że kod CALC nie zadziała, jeśli nie wstawisz spacji poprawnie.

Więc to nie działało dla mnie calc(#{$a}+7px)

Ale to zadziałało calc(#{$a} + 7px)

Zajęło mi to kiedyś, żeby to rozgryźć.

Udit
źródło
2

Próbowałem tego, a następnie naprawiłem problem. Obliczy wszystkie punkty przerwania mediów automatycznie według podanej prędkości (wielkość podstawowa / wielkość stawki)


$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
źródło
0

Oto naprawdę proste rozwiązanie wykorzystujące SASS / SCSS i styl formuły matematycznej:

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

Podsumowując, zdecydowanie zalecamy, aby zrozumieć transform-origin, rotate()i skew():

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

Carl LD
źródło
-2

możesz użyć swojego werbalnego #{your verbal}

Girraj
źródło
3
To wydaje się dziwną odpowiedzią. Zakładam, że masz na myśli, variableale biorąc pod uwagę, że OP wie, co to jest zmienna (określają $body_paddingw swoim kodzie), co dodaje twoja odpowiedź?
Mike Poole,
Mam odpowiedź
Girraj,
-6

Spróbuj tego:

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

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}
Mas Hary
źródło
3
W jaki sposób jest to lepsze niż powyższa zaakceptowana odpowiedź? Nie wydaje się, że robi to samo ...?
Jules