Вычесть пиксели из процента в SASS?

Question

Я знаю, что вы можете выполнить простые математические вычисления в Sass/Scss.Но есть ли способ вычесть пиксели из процентов?Например:

$image-size: 200px;

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

Answer 1

Я не вижу, как это будет работать, факт - это Sass не может волшебным образом знать размер, который будет иметь ваш коробку.

Теперь, если я получу то, что вы пытаетесь сделать, лучшее решение будет обернуть ширину родительской коробки.определенная ширина.

Answer 2

Вы можете использовать расчет() функция, чтобы получить то, что вы хотите.Это экспериментально, но все же довольно хорошая поддержка разными браузерами.

С Сасс, вы можете создать calc mixin чтобы это работало на большем количестве версий браузера с помощью-webkit и -moz префиксы (нет необходимости в Опера один):

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

И назовите это примерно так:

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