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

【问题标题】：how to avoid SCSS from recognizing slash symbol as a Division in a function如何避免 SCSS 将斜杠符号识别为函数中的除法
【发布时间】：2023-01-26 08:08:38
【问题描述】：

我正在使用 SCSS (sass)，每当我使用带有输入变量的函数时都会出现问题，如果变量与斜杠符号 (/) 一起使用，它们将被识别为 Equation 这里我有 2 个例子，所以在第一个中我使用了削减符号 (/)，它是经过考虑的作为一个分配下一个我使用了百分比 (%)，它被认为是一个 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% ;
 }

【问题讨论】：

我尝试使用 () 或 "" 并将我的变量包含在其中，然后通过这样做避免将它们视为方程式，但它没有帮助

标签： sass

【解决方案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 中所示：

Sass 中的百分比就像所有其他单位一样工作。它们不能与小数互换，因为在 CSS 中小数和百分比表示不同的东西。例如，50% 是一个以% 为单位的数字，Sass 认为它不同于数字0.5。

您可以使用单位算术在小数和百分比之间进行转换。 math.div($percentage, 100%)会返回对应的小数，$decimal * 100%会返回对应的百分比。您还可以使用 math.percentage() function 作为更明确的写法 $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);
}

【讨论】：

【解决方案2】：

你需要一个为那个用例制作的 sass 库（你可以使用 [list.slash()] 强制/用作分隔符）：

@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);
}

【讨论】：