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

Question

我有一个mixin，它将px转换为rem px转换为rem，我有这样的代码：

.按钮{@包括rem（字体大小，24px）；@包括rem（填充，10px）；@包括rem（边界半径，5px）；}

这将产生这样的CSS:

.按钮{字体大小：1.5rem；衬垫：0.625rem；边界半径：0.3125rem；｝

但我想使用指南针中的一些混合元素，例如，我想使用罗盘中的边界半径

.box{@包括边界半径（10px）；}

它会生成这个CSS:

.box{-moz边界半径：10px；-webkit边界半径：10px；边界半径：10px；｝

有没有这样的方法：

.box{@include rem（@include border radius（10））；}

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;
    }
}

现在，您所要做的就是向任何属性添加前缀，将值true添加到mixin的末尾，就像这样…

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

否则，如果你不想在fon-size之类的属性上添加任何前缀，你就不会添加最后一个值，比如so…

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

我这里有一个工作演示。。。

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