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

蛋蛋2020-03-23

我喜欢在像素大小上使用rem单位进行CSS大小调整，并且正在尝试使用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将变量识别为数字，从而正确使用除法运算符？

另外，在进一步测试之后，我意识到串联仅发生在最后一个变量上。

猿前端2020/03/23 15:43:54

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

我首先尝试使用@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

樱2020/03/23 15:43:54

尝试这个：

padding: #{$padding / 10}rem;

在SASS / SCSS中进行级联使用ruby语法，并且您在混合一个数学方程式，然后进行级联，这是一个变量类型的混合，所以我不感到惊讶它无效。

对{{here}中包含的表达式和变量进行了评估，就好像它们与该行的其余部分是分开的一样，因此，请不要键入其余部分。如果在您不期望的时候输出被引用，这也会派上用场（unquote（）函数也是如此）

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer