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

我有一个将px转换为rem的mixin，我有以下代码：

.button { @include rem(font-size, 24px); @include rem(padding, 10px); @include rem(border-radius, 5px); } .按钮{ @包括rem（字体大小，24px）； @包括rem（填充，10px）； @包括rem（边界半径，5px）； } 这将产生以下CSS：

.button { font-size: 1.5rem; padding: 0.625rem; border-radius: 0.3125rem; } .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .按钮{ 字体大小：1.5rem； 填充：0.625rem； 边界半径：0.3125rem；} 但我想使用一些来自compass的混音，例如，我想使用来自compass的边界半径

.box { @include border-radius(10px); } .盒子{ @包括边界半径（10px）； } 它将生成以下CSS：

.button { font-size: 1.5rem; padding: 0.625rem; border-radius: 0.3125rem; } .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .盒子{ -moz边界半径：10px； -webkit边界半径：10px； 边界半径：10px；} 有没有办法做到这一点：

.box { @include rem(@include border-radius(10)); } .盒子{ @包括rem（@包括边界半径（10））； }

---

你不能按你喜欢的方式把两个混合物加在一起。所以你只需要让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;
    }
}

现在，您所要做的就是向任何属性添加前缀，将值true添加到mixin的末尾，如下所示

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

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

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

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

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

我有一个工作演示

---

*另外，我还修改了这个mixin来处理百分比。

可能是@freeman76的重复，这有点脱离上下文，但是

边界半径

不需要前缀。还需要考虑哪些属性需要转换为REMS，例如边界半径不需要在REM上，因为您需要更多的绝对值。嗨，Vangel，你说得对，我没有为前缀做最好的例子：但是，对于使用RIM单元的边界半径，我认为它不会伤害。如果用户更改了基本字体大小，文本变得非常大，那么角将相应地调整。嗨，Richard，非常感谢您的回复。我有一个问题，对于%单位，保持百分比不是更好吗？或者字体大小的百分比更高？您好@freeman76。没问题。很抱歉，但是我不完全明白你的问题。我想我在底部写的关于百分比的注释可能会让人困惑。长话短说，我想说的是，这个混音允许你使用%的单位，比如“@include rem（右边距，10%）；”。因此，您仍然可以对字体大小执行与此相同的操作，例如“@include rem（font size，16px）；”。所以，不要因为百分比的事情而心烦意乱。只要知道，现在如果你把一个%unit传递到mixin中，它就不会像以前那样失败。