¿Restar píxeles del porcentaje en SASS?

Question

Sé que puedes hacer algunos cálculos simples en Sass/Scss.¿Pero hay alguna manera de restar píxeles de los porcentajes?Por ejemplo:

$image-size: 200px;

.bio {
    width: 100% - $image-size;
}

Answer 1

No veo cómo funcionaría eso, el hecho es que SASS no puede saber mágicamente el tamaño que tendrá su caja.

Ahora, si obtengo lo que está tratando de hacer, la mejor solución sería envolver el ancho de los padres de .Box en una variable y luego rescatar el ancho de su imagen a esa variable, teniendo en cuenta el 100% de ancho significa que obtendrá el 100% de uncierto ancho.

Answer 2

Puedes usar el calcular() función para conseguir lo que quieres.Es experimental pero aún bastante bien apoyado por los diferentes navegadores.

Con Hablar con descaro a, puedes crear un calc mixin para que esto funcione en más versiones del navegador con el-webkit y -moz prefijos (no es necesario el Ópera uno):

@mixin calc($key, $value) {
  #{$key}: -webkit-calc(#{$value});
  #{$key}: -moz-calc(#{$value});
  #{$key}: calc(#{$value});
}

Y llámalo con algo como:

.bio {
  @include calc("width", "100% - #{$image-size}");
}