对可变参数 Sass mixins 进行数学运算

Posted 2023-03-06

【中文标题】对可变参数 Sass mixins 进行数学运算

【英文标题】：Doing math on variable argument Sass mixins

【发布时间】：2013-10-25 08:58:41

【问题描述】：

我喜欢在我的 CSS 大小调整中使用带有像素后备的 rem 单位，并且我正在尝试制作 mixin 来帮助解决这个问题。对于字体大小，这很简单：

@mixin font-size($size) 
  font-size: $size + px;
  font-size: ($size / 10) + rem;

但是对于填充、边距等，mixin 需要接受可变参数，这可以根据 Sass 文档http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

但是，使用以下 mixin，而不是除以 10，mixin 只是在数字之间添加一个斜线。也就是这个：

@mixin padding($padding...) 
    padding: $padding + px;
    padding: ($padding / 10) + rem;

.class 
    @include padding(24);

输出这个：

.class 
    padding: 24px;
    padding: 24/10rem;

而不是像我期望的那样：

.class 
    padding: 24px;
    padding: 2.4rem;

有没有办法确保 Sass 将变量识别为数字，从而正确地对它们使用除法运算符？

另外，经过更多测试后，我意识到连接只发生在最后一个变量上。

【问题讨论】：

How to do math in a mixin with SASS?的可能重复

【参考方案1】：

使用calc 和interpolation（又名#）可能会有所帮助。例如。

$height: 10px;
$padding: 2px;

height: calc(#$height + #$padding * 2); // calc(10px + 4px)

这与...不相同

height: calc($height + #$padding * 2);
// resolves to...
height: calc($height + 4px); // ERROR

height: #$height + $padding * 2;
// resolves to...
height: 10px + 4px; // ERROR

【参考方案2】：

看来我真正需要在这里使用的是列表而不是变量参数，以便分别操作每个值。

我第一次尝试使用 @each 指令执行此操作，但不知道如何在声明中使用它。这会引发错误：

@mixin padding($padding) 
   padding: @each $value in $padding  $value + px ;
   padding: @each $value in $padding  ($value / 10) + rem ;

所以我最终写了一些更冗长的东西，分别处理四种可能的情况（即你传递 1、2、3 或 4 个参数）。看起来像这样，并且可以按我的意愿工作：

@mixin padding($padding) 
    @if length($padding) == 1 
        padding: $padding+px;
        padding: $padding/10+rem;
    
    @if length($padding) == 2 
        padding: nth($padding, 1)+px nth($padding, 2)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem;
    
    @if length($padding) == 3 
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem;
    
    @if length($padding) == 4 
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem;
    

我收集了 rem mixins，包括这个作为 Gist 在这里 https://gist.github.com/doughamlin/7103259

【参考方案3】：

试试这个：

padding: #$padding / 10rem;

在 SASS/SCSS 中连接使用 ruby​​ 语法，并且您混合了一个数学方程式，然后是一个连接，这是一种可变类型的混合，所以它不起作用对我来说并不奇怪。

#here 中包含的表达式和变量被评估为与行的其余部分分开，因此不会对行的其余部分进行类型转换。如果您的输出在您不期望的情况下被引用（就像 unquote() 函数一样），也会派上用场

【讨论】：

这很有用！谢谢！

如果我需要做这样的事情怎么办：```

注意 #$padding / 10rem;将值转换为字符串。更好的写法是 $padding / 10 + 0rem;如果您需要执行其他数学运算，则将其保留为数字。