Subtract Pixels From Percentage in SASS?

percentage sass pixels
realph picture realph · May 18, 2012 · Viewed 11.1k times · Source

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;
}

Answer

Balthazar picture Balthazar · Aug 19, 2014

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}");
}

Related questions

How do I calculate the percentage of a number?

I would like to calculate, in PHP, the percentage of a number. For example: $percentage = 50; $totalWidth = 350; For this example, 50% of 350 = 175 How can I do that?

Read More
Format number as percent in MS SQL Server

I am trying to simply format a number as a percent with two decimal places. If it is 37 divided by 38 (aka .973684210526315789), I would like it to show 97.36 % in the SQL output. I know it is recommended to do formatting in …

Read More
How do I print the percent sign(%) in c

I am a beginner in C, and I was wondering why this program does not print % sign? The code is: #include<stdio.h> main() { printf("%"); getch(); }

Read More