首页 文章

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

提问于
浏览 次
16

我喜欢使用具有像素回退的rem单位来调整CSS大小，并且我正在尝试使用mixins来帮助它 . 对于font-size，这很容易：

@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将变量识别为数字，从而正确地使用除法运算符？

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

css sass mixins

2 回答

  • 14

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

    我首先尝试使用@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的集合，其中包括这个作为一个要点https://gist.github.com/doughamlin/7103259

    回复于
  • 17

    试试这个：

    padding: #{$padding / 10}rem;

    在SASS / SCSS中连接使用ruby语法，你混合了一个数学方程式，然后是一个连接，这是一个变量类型的混合，所以我觉得它不起作用并不令人惊讶 .

    ＃中包含的表达式和变量被分解为与该行的其余部分分开，因此不会对该行的其余部分进行类型转换 . 如果你的输出在你没想到的时候被引用也会派上用场（和unquote（）函数一样）

    回复于

相关问题