Sé que puedes hacer algunas matemáticas simples en Sass/Scss. Pero, ¿hay alguna manera de restar píxeles de porcentajes? Por ejemplo:¿Restar píxeles del porcentaje en SASS?
$image-size: 200px;
.bio {
width: 100% - $image-size;
}
No veo cómo eso incluso trabajar, de hecho es SASS no puede saber el tamaño mágicamente su caja tendrá.
Ahora, si obtengo lo que estás tratando de hacer, la mejor solución sería envolver el ancho padre de .box en una variable y luego restar el ancho de la imagen a esa variable, teniendo en cuenta que el 100% de ancho significa que obtendrá el 100% de un cierto ancho
Puede usar la función calc() para obtener lo que desea. Es experimental pero todavía pretty good supported por los diferentes navegadores.
Con Sass, se puede crear un calc mixin para obtener esta trabajando en más versiones de navegadores con los -webkit y -moz prefijos (sin necesidad de la Opera uno):
@mixin calc($key, $value) {
#{$key}: -webkit-calc(#{$value});
#{$key}: -moz-calc(#{$value});
#{$key}: calc(#{$value});
}
y llamarlo con algo así como:
.bio {
@include calc("width", "100% - #{$image-size}");
}
'calc()' es la magia que sass le faltaba. Esta respuesta ya no es correcta. –
@SethBattin Decir que la respuesta es "ya no es correcta" no es del todo cierto: Sass * no puede * restar píxeles de porcentajes/em/rem/vh/vw/etc. 'calc()' es una característica de CSS, no de Sass. – cimmanon
@cimmanon Es una distinción inútil hacer, enfatizar que sass no puede hacer nada, cuando el objetivo es implementar eso en css. Usar sass es solo una complejidad extra para el estilo, y la respuesta de Aperçu se ocupa de esa complejidad. –