Calcule un porcentaje con SCSS / SASS

121

Quiero establecer un ancho en porcentaje en scss mediante cálculo, pero me da errores.

CSS no válido después de "...- width: (4/12)%": expresión esperada (por ejemplo, 1 px, negrita), era ";"

Quiero hacer algo como

$my_width: (4/12)%;

div{
width: $my_width;
}

¿Cómo agrego el signo% allí?

Misma pregunta con px y em

css sass Nick Ginanto
fuente
1
No hay nada que manipular. Solo quiero agregar la unidad del número al cálculo. Igual que (400/20) px. ¿Cómo tengo un número y px / em /% en scss? De esa manera podría tener "variables globales" que puedo cambiar una vez
Nick Ginanto
Intente agregar un corchete como $ my_width: ((4/12)%);
Sri
Vaya ... Lo siento, no tuve la oportunidad de comprobarlo y probarlo una vez más ... {$ my_width: (4/12)%;}
Sri

Respuestas:

211

¿Has probado la función de porcentaje ?

$my_width: percentage(4/12);
div{
width: $my_width;
}
Tomas
fuente
1
¿Existe una función similar para px y em?
Nick Ginanto
1
No estoy seguro, pero en la sección de fuentes de la documentación puede ver la lógica subyacente: Sass :: Script :: Number.new (value.value * 100, ['%']), así que creo que si no lo hacen Existe, puede hacer esto directamente o crear algunas funciones de envoltura usted mismo.
Tomas
4
@NickGinanto para px se puede agregar +pxal final de la línea, por ejemplowidth: ($foo + $bar) +px
DisgruntledGoat
2
@DisgruntledGoat No, nunca deberías hacer eso bajo ninguna circunstancia. La adición de unidades debe realizarse mediante multiplicación (por ejemplo $foo + $bar * 1px), concatenando la unidad de esa manera solo le da una cadena.
cimmanon
@cimmanon, ¿eso cambió recientemente? Estoy seguro de que no fue el caso cuando publiqué mi comentario.
DisgruntledGoat
30

De otra manera:

$my_width: 4/12*100%;

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

Sass generará el valor en%.

rlejnieks
fuente
13
Tenga en cuenta que tuve que usar 100/6 * 1% para que esto funcionara para mí, o de lo contrario terminé con 1666.67%.
sp00n
¿Dónde puedo encontrar una documentación de lo que * 100% realmente hace?
Ini
1

Pude hacer que funcionara de esta manera:

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

De esta forma no es necesario utilizar ninguna función especial.

Enrique Cuchetti
fuente