如何避免 SCSS 将斜杠符号识别为函数中的除法

Question

我正在使用 SCSS (sass)，每当我使用带有输入变量的函数时都会出现问题，如果变量与斜杠符号 (/) 一起使用，它们将被识别为方程式这里我有 2 个例子，所以在第一个例子中我使用了斜杠符号 (/)，它被 considered 作为除法下一个我使用了百分比 (%)，它认为是 mod 而不是简单的百分比 那么如何避免将其视为方程式？ 这是一些例子：

 @mixin grid_column_row($column_1,$column_2,$row_1,$row_2) {
      grid-column: ($column_1)/($column_2);
      grid-row: ($row_1)/($row_2);
  }

在此示例中，我希望将其视为普通的网格行和网格列，例如：网格行：1/3；网格列：6/12；不作为部门，例如：网格行：0.33；（1/3）网格列：0.5； (6/12)

第二个百分比 (%) 示例：

@mixin font-size_p($percent) {
    font-size: $percent% ;
 }

Answer 1

对于你的第一个 mixin，你需要使用 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};
}

对于你的第二个 mixin，如 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%.

你可以将你的 mixin 写成：

@mixin font-size_p($percent) {
   // Or + 0%, depending on how your want to write your percentage values
   font-size: $percent + 100%;
}

或者像这样：

@mixin font-size_p($percent) {
   font-size: math.percentage($percent);
}

如何避免 SCSS 将斜杠符号识别为函数中的除法

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

sass