¿Valor de variable negativa de Sass?

107

Tengo un par de selectores de scss en los que uso la misma cantidad positiva y negativa, como en:

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

Preferiría usar una variable para todas las cantidades de 15px, pero esto no funciona:

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

Las cantidades de margen se convierten en números positivos. ¿Me estoy perdiendo de algo?

Steve
fuente

Respuestas:

215

Pruébalo así

margin: 0 (-$pad) 20px (-$pad);
Zoltan Toth
fuente
1
Probé este enfoque automáticamente; parece que no funciona cuando se usa en la función calc. Editar: Parece que no necesita usar paréntesis cuando usa calc, pero necesita interpolar stackoverflow.com/questions/17982111/…
Kevin
2

Estoy agregando mis dos penneth después de considerar las dos respuestas anteriores, pero luego leo esto (énfasis mío):

Debería evitar especialmente el uso de interpolación como#{$number}px . ¡Esto en realidad no crea un número! Crea una cadena sin comillas que parece un número, pero no funcionará con ninguna operación o función numérica. Trate de hacer su unidad matemática limpia para que $numberya tenga la unidad px, o escriba $number * 1px.

Fuente

Por lo tanto, creo que la forma correcta sería la siguiente, que conserva las habilidades matemáticas de SASS / SCSS:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;
EvilDr
fuente
A primera vista, parece ser quisquilloso (su respuesta), pero a segunda vista, realmente es la mejor respuesta. Después de todo, si la variable se convierte en una variable negativa, ¡la respuesta se vuelve positiva! $ pad: -2rem; ... margen: 0 - # {$ pad}; // se convierte en margen: 0 --2rem; margen: 0 $ pad * -1; // se convierte en margen: 0 2rem;
Fnordius