¿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?

css sass compass-sass

— Steve
fuente

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

27

Una solución más sensata de acuerdo con las pautas de Sass sería para interpolatevariables como el siguiente ejemplo:

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

Un ejemplo: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

— Vangel Tzo
fuente

@Green Siempre puede consultar el enlace de ejemplo: sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

— Vangel Tzo

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