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

Question

我有一个 mixin 可以将 px 转换为 rem PX TO REM ，我有这个代码:

。按钮 {
@include rem(字体大小，24px);
@include rem(padding, 10px);
@include rem(border-radius, 5px);
}

这将产生这个 CSS:

。按钮 {
字体大小:1.5rem；
填充:0.625rem；
边界半径:0.3125rem； }

但是我想使用 compass 中的一些mixin，例如我想使用 compass 中的边框半径

。盒子 {
@include 边框半径(10px)；
}

它会生成这个 CSS:

。盒子 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
边框半径:10px； }

有没有办法做这样的事情:

。盒子 {
@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 或您只是不添加像这样的最后一个值...

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

我有一个工作演示 here...

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