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

Question

我使用的是SCSS(sass(，每当我使用带有输入变量的函数时都会出现问题，如果变量与斜杠(/(一起使用，它们将被识别为等式这里我有两个例子，所以在第一个例子中，我使用了斜线符号(/(，它被视为除法，下一个例子中我使用了百分比(%(，它认为是一个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；网格colmun:6/12；不是作为部门，类似于：网格行：0.33；(1/3(网格colmun:0.5；(6/12(

以及第二个具有百分比(%(的示例：

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

Answer 1

对于您的第一个mixin，您需要使用插值：

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

对于您的第二次混音，如文档中所示：

萨斯的百分比和其他单位一样工作。它们不能与小数互换，因为在CSS中，小数和百分比的含义不同。例如，50%是以%为单位的数字，Sass认为它与数字0.5不同。

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

Answer 2

您需要为该用例制作一个sass库(您可以使用[list.slash((]强制//strong>用作分隔符(：

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

第二种情况你可以使用图书馆的数学：

@use "sass:math";
math.percentage($number) // converts number to a percentage number