在可变参数的Sass混合器中进行数学运算

Question

在可变参数的Sass混合器中进行数学运算

30

我喜欢在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 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将变量识别为数字，从而正确地对它们使用除法运算符？

此外，在进一步测试后，我意识到连接仅在最后一个变量上进行。

- Doug Hamlin

可能是如何在SASS mixin中进行数学运算？的重复问题。 - cimmanon

3个回答

21

似乎我需要使用列表而不是可变参数来单独操作每个值。我最初尝试使用@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

- Doug Hamlin

0

或许有助于您的问题解决，尝试使用calc与插值（又称#{}）。例如：

$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

- Nickofthyme

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Owen C. Jones · Accepted Answer

试一下这个：

padding: #{$padding / 10}rem;

SASS/SCSS中的连接操作使用Ruby语法，您混合了一个数学方程式和一个连接操作，这是一种变量类型混合，所以我不惊讶它没有起作用。

在#{here}中包含的表达式和变量被视为与该行其余部分分开评估，因此不需要对该行其余部分进行强制类型转换。如果您的输出在您没有预期时被引用（unquote()函数也有类似功能），那么这也非常方便。