Calculate a Percent with SCSS/Sass

Calculate a percent with SCSS/SASS

Have you tried the percentage function ?

$my_width: percentage(4/12);
div{
width: $my_width;
}


UPDATE

This function was updated since version 1.33.0 and now this is a correct method to do it:

@use "sass:math";

div {
width: math.percentage(math.div(4,12));
}

Source: https://sass-lang.com/documentation/modules/math#percentage

Sass calculate percent minus px

Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide "100%" is in terms of pixels or any other unit. That's something only the browser knows.

You need to use calc() instead. Check browser compatibility on Can I use...

.foo {
height: calc(25% - 5px);
}

If your values are in variables, you may need to use interpolation turn them into strings (otherwise Sass just tries to perform arithmetic):

$a: 25%;
$b: 5px;

.foo {
width: calc(#{$a} - #{$b});
}

sass percentage of a number

The percentage(2/3) function call appends a %. You can not multiply that with a non-unitless value like 10rem. Instead, calculate it directly like:

img { 
max-height: calc(100vh - #{2/3 * 10rem});
}

The #{} (interpolation) is needed to render the result of the calculation inside the Css calc() expression.

Read more on...

  • Sass interpolation: https://sass-lang.com/documentation/interpolation
  • Operators: https://sass-lang.com/documentation/operators/numeric

sass: calculating percentage with pixels

Dividing the percentage by 100% should give you a decimal which you can then multiply by the pixel value.

width: 100px * ((100% - $fooPercent) / 100%)

SCSS min() with both px and percentage units

Ok, so the problem was that both CSS and SCSS has the same min() function, and there was a conflict. But SCSS is actually case sensitive, while CSS isn't so I was able to write Min() or MIN() instead. That worked just fine. I don't think this is something more than a hack though.

How to calculate multiples of percentage value in SCSS?

You can achieve this with a SCSS @for loop.

$length: 12.5%;

@for $i from 1 through 4 {
.item-#{$i} {
top: ($i * $length);
}
}

It will generate this CSS:

.item-1 {
top: 12.5%;
}

.item-2 {
top: 25%;
}

.item-3 {
top: 37.5%;
}

.item-4 {
top: 50%;
}

Example on CodePen. Use the right top CSS dropdown menu to 'View Compiled CSS'.

How to calculate with SCSS variables from function

I managed to find something that is some what working. For example:

$switch-thumb-size: rem-calc(10px);
$switch-track-height: rem-calc(20px);
$something: calc( ( #{$switch-thumb-size} - #{$switch-track-height} ) / 2 );

This results in:

calc( ( 0.71428rem - 1.4285rem ) / 2 )

But there are problems with it. First if you know that what you calculated should always be minus and you therefor add a - sign infront of the variable it will not work. Example:

height: - $something; // Doesn't work

The second problem I have with this method is that it creates a lot of redundant characters.

Because it actually puts: height: calc( ( 0.71428rem - 1.4285rem ) / 2 ) in your css instead of: height: -0.35684rem

SCSS (sass) calculation: #{}

Try:

font-size: #{(($font-size*0.7) / $em) / (($font-size*0.8125) / $em)}em

The interpolation back into a string #{...} should be the last thing done after the calculations.



Related Topics



Leave a reply



Submit