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

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

¿Existe una función similar para px y em?

— Nick Ginanto

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

@NickGinanto para px se puede agregar +pxal final de la línea, por ejemplowidth: ($foo + $bar) +px

— DisgruntledGoat

@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

De otra manera:

$my_width: 4/12*100%;

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

Sass generará el valor en%.

— rlejnieks
fuente

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

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