Variável Sass na função CSS calc ()


1347

Estou tentando usar a calc()função em uma folha de estilo Sass, mas estou tendo alguns problemas. Aqui está o meu código:

$body_padding: 50px

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

Se eu usar o literal em 50pxvez da minha body_paddingvariável, obtenho exatamente o que quero. No entanto, quando alterno para a variável, esta é a saída:

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

Como posso fazer com que o Sass reconheça que ele precisa substituir a variável dentro da calcfunção?


10
possível duplicata Usa uma variável em um Mixin
cimmanon

19
@ user3705055 Você precisa calcular, pois o Sass não pode calcular 100% - 50px, pois as unidades são diferentes. Isso só pode ser calculado pelo navegador, uma vez que ele sabe o tamanho do contêiner para converter 100% em px antes de adicionar os valores. Esta é a razão exata pela qual o calc existe.
Mog0

Respostas:


2544

Interpolar :

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

Nesse caso, a caixa de borda também seria suficiente:

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

3
box-sizing: border-box;seria o caminho ideal a percorrer, na minha opinião, é claro. Em geral, o modelo de caixa dimensionamento deve fazer t
Brandito

Muito Obrigado! Eu estava prestes a ir a rota css comcalc(100% - var(--body_padding))
Sylar

51

Para usar $variablesdentro calc()da propriedade height:

HTML:

<div></div>

SCSS:

$a: 4em;

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

11
O que isso acrescenta à resposta aceita de quase 5 anos atrás?
Random_user_name 28/02/19

6
Por alguma razão, acho essa resposta mais clara. Eu não faço muito trabalho de scss, então isso foi "mais claro" e mais fácil para eu entender.
2b77bee6-5445-4c77-b1eb-4df3e5

4
Esta é definitivamente uma resposta mais clara do que a aceita. 'Interpolar' não significou nada para mim.
Jacques Mathieu

3
@JacquesMathieu sass-lang.com/documentation/interpolation - Se isso não significa nada para você e é uma resposta com tantos votos, provavelmente você deve entender do que se trata. Apenas meus dois centavos ...
A. Chiesa

1
@UMA. Certamente, isso define interpolação. No entanto, o OP e eu não sabíamos da interpolação no SASS, caso contrário, essa pergunta nunca teria sido feita. Assim, apenas declarar uma palavra que nunca se ouviu antes sem uma definição ou qualquer pretexto não ajuda a criar uma resposta abrangente. Esse link certamente é útil. Teria sido bom ver isso na resposta aceita.
Jacques Mathieu

9

Mesmo que não esteja diretamente relacionado. Mas descobri que o código CALC não funcionará se você não colocar espaços corretamente.

Então isso não funcionou para mim calc(#{$a}+7px)

Mas isso funcionou calc(#{$a} + 7px)

Levei algum tempo para descobrir isso.


2

Eu tentei isso, então eu corrigi o meu problema. Ele calculará todo o ponto de interrupção da mídia automaticamente pela taxa especificada (tamanho base / tamanho da taxa)


$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

Aqui está uma solução realmente simples usando SASS / SCSS e um estilo de fórmula matemática:

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

Para concluir, eu sugiro fortemente que você entenda transform-origin, rotate()e skew():

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


-2

você pode usar seu verbal #{your verbal}


3
Parece uma resposta estranha. Suponho que você esteja falando sério, variablemas considerando que o OP sabe o que é uma variável (eles especificam $body_paddingem seu código) o que sua resposta adiciona?
Mike Poole

Eu estou dando a resposta #
22419 Girraj

-6

Tente o seguinte:

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

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

3
Como isso é melhor do que a resposta aceita acima? Nem parece fazer a mesma coisa ...?
Jules
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.