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)
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 am working on a mixin for breakpoints and I have the following issue.
when a specific state (mode for max-width) is set then the breakpoint should be recalculated by extracting one em value (1px/16 (default font size)).
This is the important part of my code (I might get rid of the function, basically this can be done inline):
$mediaBreakpoint: map-get( $breakpoints, $breakpoint );
// if the mode is for max-width then subtract 1px.
#if map-get( $modes, $mode ) == 'max-width' {
$mediaBreakpoint: calculateMaxWidth(#{$mediaBreakpoint})
}
#debug $mediaBreakpoint;
/**
* calculate the max width based on input
*/
#function calculateMaxWidth($breakpoint){
$newBreakpoint: calc( #{$breakpoint} - 0.0625em ); // 1px in em sizing.
#return $newBreakpoint;
}
But whatever I try, the #debug value shows as:
48em-0.0625em // this is invalid, I need the actual outcome (in this case 47.9375) .
64em // valid min-width
This is the compiled css:
#media screen and (max-width: calc( 48em - 0.0625 )) {
}
What am I missing?
I found the answer myself after a lot of debugging. At first I misunderstood the interpolation. After reading the docs in depth I noticed that I should have wrapped the whole calculation instead of just the variable because I am working inside the map expression.
Quoted from the official Sass docs:
Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS.
I changed my function to calculate like this and then the mixin started working. hooray!
$newBreakpoint: #{$breakpoint - 0.0625em};
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
In an scss file is it possible to do something like this?
$select-height: .75rem + 2px;
There are 2 options I can come up with off the top of my head.
1: CSS calc() function
$select-height: calc(.75rem + 2px);
2: Convert px to rem
#function rem($px, $base: 16) {
#return $px / $base;
};
$select-height: #{.75 + rem(2)}rem;
This assumes 16px is the basis for your rem units, which you can change by passing a second argument into your rem call. Stripping the units makes the math work. Alternatively, you can use a similar function to convert your rem to px by switching the division with multiplication. You could then convert the whole thing back to rem. But this is the simplest method I know of if you're doing rem-to-px math.
If you had a different variable for your base size in pixels, you could run a strip-units function like this:
#function strip-units($value) {
#return $value / ($value * 0 + 1);
};
I am new to SASS and Compass trying to create one function which can convert passed pixel value to em. I found one tutorial but it is for SCSS and that doesn't work with SASS.
Even I have checked on SASS website but seem they have most document for SCSS and not everything they have describe for SASS.
Here what I am writing
#function em($px, $base: 24px)
#return ($px / $base) * 1em
Also using vertical-rythem in my project and tried this to but than again giving error for $base-font-size
#function em($px, $base: $base-font-size)
#return ($px / $base) * 1em
So when I use it as
font-size: em(16px)
It should convert to 1em in output
The function you have seems correct. Just make sure you have defined $base-font-size with a value such as 16px.
The above mixin you have should also work
$base-font-size: 16px;
#function em($px, $base: $base-font-size) {
#return ($px / $base ) * 1em;
}
Now you can call font-size: em(16px); and it should work
You can also call this function with an optional base, sometimes you might want to calculate on a base that's not 16px.
Please also look up http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ for rem font sizing. You might want to skip em because they have a nesting problem http://css-tricks.com/why-ems/
For a more detailed version of the above mixin, where you can call
border: emCalc (10 20 30 40);
Where you don't have to repeat the px value again and again and you may have 1 to 4 values within, check the mixin in Zurb's foundation _global.scss
https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss#L183