Valor da variável negativa Sass?

107

Eu tenho alguns seletores de scss onde uso a mesma quantidade de positivo e negativo, como em:

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;

Eu prefiro usar uma variável para todos os valores de 15px, mas isso não funciona:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;

Os valores da margem são convertidos em números positivos. Estou esquecendo de algo?

css sass compass-sass

— Steve
fonte

215

Tente assim

margin: 0 (-$pad) 20px (-$pad);

— Zoltan Toth
fonte

1

Tentei automaticamente esta abordagem - parece não funcionar ao usar a função calc. Editar: parece que você não precisa usar parênteses ao usar calc, mas precisa interpolar stackoverflow.com/questions/17982111/…

— Kevin

27

Uma solução mais sensata de acordo com as diretrizes de ousadia seria para interpolatevariáveis como o seguinte exemplo:

margin: 0 -#{$pad} 20px -#{$pad};

Um exemplo: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

— Vangel Tzo
fonte

@Green Você sempre pode verificar o link de exemplo: sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

— Vangel Tzo

2

Estou adicionando meus dois penneth depois de considerar as duas respostas anteriores, mas então lendo isto (ênfase minha):

Você deve evitar especialmente usar interpolação como#{$number}px . Na verdade, isso não cria um número! Ele cria uma string sem aspas que se parece com um número, mas não funciona com nenhuma operação ou função numérica. Tente fazer sua unidade matemática limpa de forma que $numberjá tenha a unidade px, ou escreva $number * 1px.

Fonte

Portanto, acredito que a forma correta seria a seguinte, que preserva as habilidades matemáticas do SASS / SCSS:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;

— EvilDr
fonte

À primeira vista, parece ser minucioso (sua resposta), mas à primeira vista é realmente a melhor resposta. Afinal, se a variável se tornar uma variável negativa, a resposta torna-se positiva! $ pad: -2rem; ... margem: 0 - # {$ pad}; // torna-se margem: 0 --2rem; margem: 0 $ pad * -1; // torna-se margem: 0 2rem;

— Fnordius