Geek asks and answers

Subtract pixels from percent in SASS?

I know that you can do simple math in Sass / Scss. But is there a way to subtract pixels from percentages? For instance:

$image-size: 200px;

.bio {
    width: 100% - $image-size;
}
+5
source share
2 answers

I don’t see how this will work, the fact of SASS cannot magically find out the size of your box.

Now, if I get what you are trying to do, the best solution would be to wrap the width of the parent .box cell in a variable and then subtract the width of your image by this variable - given that 100% width means that it will get 100% specific width.

+2
source

calc(), , . , .

Sass calc mixin, -webkit -moz ( Opera):

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

- :

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

More articles:


All Articles