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
Changing Bottom and Top Values in a CSS Transition on Click
Css-Selector for Multiple Elements
How to Apply Ckeditor CSS to Output
Bootstrap 4 Row Height Set by Specific Col - Not Highest One
How to Fade in Background Image by CSS3 Animation
Bootstrap 5 Off Canvas Missing CSS/Js
Svg with Radialgradient Not Work in Browsers
Re-Order Entire Page with CSS Flexbox
Codeigniter - Simple Base_Url Question
How to Do Browser Specific Conditional CSS Inside a *.CSS File
How to Add Badge on Top of Font Awesome Symbol
CSS Keyframe Animation CPU Usage Is High, Should It Be This Way
Overflow:Hidden Messing with Margins in Chrome and Safari
Is There a SASS Rule for Outputting a Descendant to the Root