I'm using SASS to generate some styles, but I can't figure this one out.
Example:$v: round(($s / 12) * 100) + "%";
results in: width: "25%";
but I want it to result in width: 25%;
Adding quotes to a number turns it into a string.
Try this instead:
$v: round(($s / 12) * 100%);
Event better:
$v: round(percentage($s / 12));
Related
I am getting "Incompatible units: 'rem' and 'px'" when overriding the Bootstrap 4.3.1 variables in a custom override sass file.
I have tried positioning following paths on custom sass file on top of the file and last line of the file as instructed on Bootstrap 4 documentation.
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
Error in terminal
ERROR in ./src/scss/main.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/scss/main.scss)
Module build failed:
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
^
Incompatible units: 'rem' and 'px'.
Remove <br> from the SCSS file first and this the problem of calc() function not the problem of px or rem.
NOTE
calc() function is the inbuilt function of CSS, so whenever you call calc() in SCSS, you need to use #{} technique to use the variable
height: calc(100% - #{$body_padding})
Now I give you one example
$custom-select-padding-y = 50px;
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * 50px}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
2 * 50px = 100px and so on after that, it cant calculate 1em + {random px} so, its return undefined and compiler give error.
calc() calculates 2 * 5px = 10px or 2 * 1rem = 32px.
calc() cant calculate 2rem + 1em, 1rem + 1px etc.
sass automatically inserts white space between and after '/'
in aspect ratio media query :
$asrStr: $asrStr + "(min-aspect-ratio:#{$maxAR1}/#{$maxAR2})";
I am getting the result:
(min-aspect-ratio: 99 / 100)
instead of
(min-aspect-ratio: 99/100)
How to remove these extra white spaces?
I don't think the spaces matter. The following works for me:
$maxAR1: 99;
$maxAR2: 100;
$asrStr: "(min-aspect-ratio:#{$maxAR1}/#{$maxAR2})";
#media #{$asrStr} {
div {
color: red;
}
}
I've got this function:
#function toRem($val){
#return #{$val / $fontSize}rem;
}
And also this property but it compiled badly:
top: 3.5rem + toRem(15); --> 3.5rem0.9375rem (compiled)
I have tried with this as well but doesn't work either, the result is the same:
top: #{$headerHeight + toRem(15)};
But if I remove the function it works:
top: 3.5rem + 0.9375rem; --> 4.4375rem
Is not possible to do this or I am doing something wrong? Can't find any info about functions in math operators :S
Thanks in advance!
In SASS, #{} is used for interpolation.
In your case, the interpolation syntax around the variables is the reason why you were seeing the resulting value get concatenated like: 3.5rem0.9375.
To work around this, you could evaluate the math expression as you normally would, without interpolation, and then add 0rem in order to coerce the number into a rem unit:
#function toRem($val){
#return ($val / $fontSize) + 0rem;
}
Example usage:
$fontSize: 16;
#function toRem($val){
#return ($val / $fontSize) + 0rem;
}
element {
top: toRem(32);
left: 3.5rem + toRem(15);
}
Output:
element {
top: 2rem;
left: 4.4375rem;
}
Hello there fellow coders,
I'm just starting out with SCSS; which is beyond awesome! There is one question I have regarding variables. I am wanting to calculate the width of divs plus it's padding, margins, and borders within a navigation element. I am then wanting to pass that calculated width into a variable like this:
$numbDivs: 4;
$divWidth: 150px;
$divPadd: 10px;
$divBorderWidth: 1px;
$divMarg: 2px;
$navBreakPoint: calc( #{$numbDivs} * ( #{$divWidth} + ( ( #{$divPadd} + #{$divBorderWidth} + #{$divMarg} ) * 2 ) ) );
I've enen tried it without the #{} portion, and that didn't work.
It might just be that scss doesn't support this...but it would be nice.
Thanks for all of y'all's posts.
calc() is a function of CSS, not Sass. If you want to store the result as a variable, drop the string interpolation and just calculate it:
$navBreakPoint: $numbDivs * ($divWidth + (($divPadd + $divBorderWidth + $divMarg) * 2));
It is worth noting that calc() does not worked in combination with media queries (see: calc() not working within media queries)
I want to be able to do the following:
height: 25% - 5px;
Obviously when I do that I get the error:
Incompatible units: 'px' and '%'.
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});
}
There is a calc function in both SCSS [compile-time] and CSS [run-time]. You're likely invoking the former instead of the latter.
For obvious reasons mixing units won't work compile-time, but will at run-time.
You can force the latter by using unquote, a SCSS function.
.selector { height: unquote("-webkit-calc(100% - 40px)"); }
$var:25%;
$foo:5px;
.selector {
height:unquote("calc( #{$var} - #{$foo} )");
}
IF you know the width of the container, you could do like this:
#container
width: #{200}px
#element
width: #{(0.25 * 200) - 5}px
I'm aware that in many cases #container could have a relative width. Then this wouldn't work.
Sorry for reviving old thread - Compass' stretch with an :after pseudo-selector might suit your purpose - eg. if you want a div to fill width from left to (50% + 10px) of screen you could use (in SASS indented syntax):
.example
background: red
+stretch(0, -10px, 0, 0)
&:after
+stretch(0, 0, 0, 50%)
content: ' '
background: blue
The :after element fills 50% to the right of .example (leaving 50% available for .example's width), then .example is stretched to that width plus 10px.
Just add the percentage value into a variable and use #{$variable}
for example
$twentyFivePercent:25%;
.selector {
height: calc(#{$twentyFivePercent} - 5px);
}