Calcular uma porcentagem com SCSS / SASS

121

Eu quero definir uma largura em porcentagem em scss via cálculo, mas isso me dá erros ..

CSS inválido após "...- width: (4/12)%": a expressão esperada (por exemplo, 1px, negrito) era ";"

Eu quero fazer algo como

$my_width: (4/12)%;

div{
width: $my_width;
}

como adiciono o sinal de% lá?

Mesma pergunta com px e em

css sass Nick Ginanto
fonte
1
Não há nada para mexer. Eu só quero adicionar a unidade do número ao cálculo. O mesmo que (400/20) px. Como eu tenho um número e px / em /% no scss? Dessa forma, eu poderia ter "variáveis globais" Eu posso mudar uma vez
Nick Ginanto
Tente adicionar um colchete como $ my_width: ((4/12)%);
Sri Lanka
Ops .. Desculpe, não tive a chance de verificá-lo e tente mais uma vez fazer isso. {$ My_width: (4/12)%;} #: 314
Sri Sri

Respostas:

211

Você já tentou a função de porcentagem ?

$my_width: percentage(4/12);
div{
width: $my_width;
}
Tomas
fonte
1
existe uma função semelhante para px e em?
Nick Ginanto 13/11/2012
1
Não tenho certeza, mas na seção de origem da documentação você pode ver a lógica subjacente: Sass :: Script :: Number.new (value.value * 100, ['%']), então eu pensaria que, se não existe, você pode fazer isso diretamente ou criar você mesmo algumas funções do wrapper.
Tomas
4
@NickGinanto para px basta adicionar +pxaté o fim da linha, por exemplowidth: ($foo + $bar) +px
DisgruntledGoat
2
@DisgruntledGoat Não, você nunca deve fazer isso em nenhuma circunstância. A adição de unidades deve ser feita por multiplicação (por exemplo $foo + $bar * 1px) . Concatenar a unidade dessa maneira fornece apenas uma string.
Cimmanon
@cimmanon isso mudou recentemente? Tenho certeza de que não foi o caso quando postei meu comentário.
usar o seguinte
30

Outra maneira:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass produzirá o valor em%.

rlejnieks
fonte
13
Observe que eu tive que usar 100/6 * 1% para fazer isso funcionar para mim, ou acabei com 1666,67%.
Sp00n
onde posso encontrar uma documentação que * 100% realmente faz?
Ini 21/07
1

Consegui fazê-lo funcionar desta maneira:

div{
   width: (4/12)* 1%;
   }

Dessa forma, você não precisa usar nenhuma função especial.

Enrique Cuchetti
fonte