Subtract Pixels From Percentage in SASS?

Question

I know you're able to do some simple math in Sass/Scss. But is there a way to subtract pixels from percentages? For example:

$image-size: 200px;

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

Solution 1

I don't see how that would even work, fact is SASS can't magically know the size your box will have.

Now if I get what you're trying to do, best solution would be to wrap .box's parent width into a variable and then substract your image width to that variable - considering 100% width means it will get 100% of a certain width.

Solution 2

You can use the calc() function to get what you want. It's experimental but still pretty good supported by the different browsers.

With Sass, you can create a calc mixin to get this working on more browser versions with the-webkit and -moz prefixes (no need of the Opera one):

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

And call it with something like:

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