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

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

existe uma função semelhante para px e em?

— Nick Ginanto 13/11/2012

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

@NickGinanto para px basta adicionar +pxaté o fim da linha, por exemplowidth: ($foo + $bar) +px

— DisgruntledGoat

@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

Outra maneira:

$my_width: 4/12*100%;

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

Sass produzirá o valor em%.

— rlejnieks
fonte

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

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