如何在SASS中将一个mixin作为另一个mixin的参数传递

Question

我有一个将px转为rem的mixin PX TO REM，下面是使用方法：

.button {
    @include rem(font-size, 24px);
    @include rem(padding, 10px);
    @include rem(border-radius, 5px);
}

生成的CSS代码如下：

.button {
    font-size: 1.5rem;
    padding: 0.625rem;
    border-radius: 0.3125rem; 
}

但是我想要使用compass中的mixin，例如我想使用compass中的border-radius：

.box {
    @include border-radius(10px);
}

它会生成以下CSS代码：

.box {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
}

那么我是否可以这样做：

.box {
    @include rem(@include border-radius(10));
}

- freeman76

---

可能是Sass插值的Mixin、Function和Variable名称的重复问题。 - cimmanon

@freeman76 这有点脱离上下文，但 border-radius 不需要前缀 http://caniuse.com/#search=border-radius。另外请考虑哪些属性需要转换为 rems，例如 border-radius 不需要使用 rem，因为你需要一个绝对值。 - Vangel Tzo

嗨Vangel，你说得对，我没有为前缀选择最佳示例 :) 但是关于使用rem单位来设置border-radius，我认为这不会有害，如果用户更改了基本字体大小并且文本变得非常大，则圆角将相应调整。 - freeman76

Answer 1

您不能像想象中的那样将两个mixin组合在一起。因此，您只需使rem mixin执行您想要的操作即可。因此，我编写了新代码来处理这个问题。

@function parseInt($n) {
    @return $n / ($n * 0 + 1);
}

@mixin rem($property, $values, $prefix: false) {
    $px: ();
    $rem: ();

    @each $value in $values {

        @if $value == 0 or $value == auto or unit($value) == "%" {
            $px: append($px, $value);
            $rem: append($rem, $value);
        } @else {
            $unit: unit($value);
            $val: parseInt($value);

            @if $unit == "px" {
                $px: append($px, $value);
                $rem: append($rem, ($val / 16 + rem));
            }

            @if $unit == "rem" {
                $px: append($px, ($val * 16 + px));
                $rem: append($rem, $value);
            }
        }
    }

    @if $px == $rem {
        #{$property}: $px;
    } @else if $prefix == true {
        #{-moz- + $property}: $px;
        #{-moz- +$property}: $rem;
        #{-webkit- +$property}: $px;
        #{-webkit- +$property}: $rem;
        #{$property}: $px;
        #{$property}: $rem;
    } @else {
        #{$property}: $px;
        #{$property}: $rem;
    }
}

现在你所需要做的就是在 mixin 结尾加上 true 值，以此来为属性添加前缀，例如：...

@include rem(border-radius, 10px, true);

否则，如果您不想在属性上添加任何前缀，例如fon-size或其他内容，则只需不添加最后一个值，如下所示...

@include rem(font-size, 10px);

我有一个工作演示在这里... *另外一件事，我修改了这个mixin以处理百分比。

- Richard Dell Donatoni

---

嗨，Richard，非常感谢您的回复。我有一个问题，对于％单位，保持百分比不是更好吗？或者这里的百分比更多用于字体大小？ - freeman76

嗨@freeman76。完全没有问题。不过很抱歉，我不确定我是否完全理解你的问题。我想我在底部做的关于百分比的注释可能有些混淆。简而言之，我想说的是这个 mixin 允许你像这样使用 % 单位 "@include rem(margin-right, 10%);". 因此，您仍然可以像这样为字体大小 "@include rem(font-size, 16px);" 做其他所有事情。所以不要过度关注百分比。只需知道现在如果您将 % 单位传递到 mixin 中，则不会出现像以前那样的失败。 - Richard Dell Donatoni