在变量参数Sass mixins上进行数学运算

问题描述

我喜欢在像素大小上使用rem单位进行CSS大小调整，并且正在尝试使用mixin来帮助解决此问题.对于字体大小，这很容易:

I like to use rem units with pixel fallbacks for my CSS sizing and am trying to make mixins to help with that. For font-size, this is easy:

@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

But for padding, margin, etc. the mixin needs to accept variable arguments, which is possible per the Sass documentation http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

但是，使用下面的mixin，而不是除以10，mixin只是在数字之间添加一个斜杠.也就是说，这个:

However, with the following mixin, instead of dividing by 10, the mixin is just adding a slash between the numbers. That is, this:

@mixin padding($padding...) {
    padding: $padding + px;
    padding: ($padding / 10) + rem;
}
.class {
    @include padding(24);
}

输出以下内容:

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

而不是像我期望的那样:

Instead of this, like I would expect:

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

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

Is there a way to make sure Sass recognizes the variables as numbers and thus uses the division operator on them correctly?

此外，在进行了更多测试之后，我意识到串联仅发生在最后一个变量上.

Also, after testing this more, I realized the concatenation only takes place on the last variable.

推荐答案

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

It seems what I really needed to use here was a list rather than a variable argument in order to manipulate each value separately.

我首先尝试使用@each指令执行此操作，但无法弄清楚如何在声明中使用它.这会引发错误:

I first tried doing this with the @each directive, but couldn't figure out how to use it inside a declaration. This throws an error:

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

所以我最终写了一些更为冗长的东西，分别处理四种可能的情况(即，您传递了1、2、3或4个参数).看起来像这样，可以按我的意愿工作:

So I ended up writing something much more verbose that handles each of the four possible cases separately (i.e. you pass 1, 2, 3 or 4 arguments). That looks like this and works as I wanted:

@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 mixin的集合，包括本摘要， https://gist.github.com/doughamlin/7103259

I made collection of rem mixins including this one as a Gist here https://gist.github.com/doughamlin/7103259

这篇关于在变量参数Sass mixins上进行数学运算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！