I am stuck here.
I want to calculate 2/3 of 10rem like this:
$percentage : percentage(2/3); // 66.666667%
$width : 10rem;
$calculate : do magic: 66.666667% of 10rem;
img { max-height: calc( 100vh - $calculate ); }
I have been looking in the SASS documentation. I can only find some stuff about math function and not too much about percentage.
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
Related
I'm using SCSS (sass) and there is a problem whenever I use a function with input variables if the variables are being used with a slash symbol (/) they will be recognized as Equation
here I have 2 examples for you so in the first one I used a slash symbol (/) and it's considered as a division
and the next one I used percent (%)and it considers as a mod instead of a simple percentage
so how can you avoid it being considered as an Equation?
here is some example :
#mixin grid_column_row($column_1,$column_2,$row_1,$row_2) {
grid-column: ($column_1)/($column_2);
grid-row: ($row_1)/($row_2);
}
in this example I want this to be considered as a normal grid-row and grid-column like :
grid-row:1/3;
grid-colmun:6/12;
not as a division like :
grid-row: 0.33;( 1/3)
grid-colmun :0.5; (6/12)
and second example with percentage (%) :
#mixin font-size_p($percent) {
font-size: $percent% ;
}
For your first mixin, you need to use interpolation:
#mixin grid_column_row($column_1,$column_2,$row_1,$row_2) {
grid-column: #{$column_1}/#{$column_2};
grid-row: #{$row_1}/#{$row_2};
}
For your second mixin, as indicated in the documentation:
Percentages in Sass work just like every other unit. They are not interchangeable with decimals, because in CSS decimals and percentages mean different things. For example, 50% is a number with % as its unit, and Sass considers it different than the number 0.5.
You can convert between decimals and percentages using unit arithmetic. math.div($percentage, 100%) will return the corresponding decimal, and $decimal * 100% will return the corresponding percentage. You can also use the math.percentage() function as a more explicit way of writing $decimal * 100%.
You can write your mixin as:
#mixin font-size_p($percent) {
// Or + 0%, depending on how your want to write your percentage values
font-size: $percent + 100%;
}
Or like this:
#mixin font-size_p($percent) {
font-size: math.percentage($percent);
}
You need a sass library made for that use case (You can use [list.slash()] to force / to be used as a separator):
#use "sass:list";
#mixin grid_column_row($column_1,$column_2,$row_1,$row_2) {
grid-column: list.slash($column_1, $column_2);
grid-row: list.slash($row_1, $row_2);
}
And second case you can use the library math:
#use "sass:math";
math.percentage($number) // converts number to a percentage number
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);
}
This question already has answers here:
Adding a unit to a number in Sass
(2 answers)
Closed 7 years ago.
I am quiet new to Sass... I want to create some css with percentage values like:
width : 13%;
The value is the result of a sass number operation. Writing this
width : $main-width + "%"
scss code generates this:
width : "13%";
css, what is actually not working because it should be:
width : 13%;
writing
width : $main-width %;
results in
width : 13 "%"
what also leads to a non working css-rule. Is there a way to make Sass print 13% plain, with no quotes?
Think of units in Sass like variables in algebra instead of just concatenating strings.
In algebra:
2x * 3 = 6x
In Sass:
13 * 1% = 13%
Use this approach to do more advanced math.
10px * 3px = 30px*px
But px*px isn't a valid CSS unit so you have to cancel one out by dividing by 1px
30px*px / 1px = 30px
Hope this helps beyond your original question.
unquote("%") does the trick.
You could try #.
I had a similar problem with a mixin and lists
#mixin p($value, $position: a, $unit: $rhythm-unit){
$vallist: ();
#if length($value) > 1 {
#each $sval in $value {
$sval: 0 !default;
$vallist: append($vallist, #{$sval}#{$unit});
}
padding: $vallist;
} #else{
#if $position == t {
padding-top: $value+$unit;
} #else if $position == r {
padding-right: $value+$unit;
} #else if $position == b {
padding-bottom: $value+$unit;
} #else if $position == l {
padding-left: $value+$unit;
} #else {
padding: $value+$unit;
}
}
}
The problem was
append($vallist, $sval+$unit);
It always added quotes around these values e.g. "1rem" "1.25rem" which is not a correct css syntax.
I replaced it with:
append($vallist, #{$sval}#{$unit});
As you can see i use #-sign with {} and + it not necessary any more.
The very interesting here is that this only appear with lists/append as you can see in my outer else.
You could find it at the sass reference page Division and slash
If you want to use variables along with a plain CSS /, you can use #{} to insert them. For example:
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
Hope it helps