how to avoid SCSS from recognizing slash symbol as a Division in a function

user_17326605 0
Viewed 130

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% ;
 }
sass
1 Answers

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);
}
user_97180560
Related