首页 文章

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

提问于
浏览 次
2

我有一个mixin将px转换为rem 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; }

但是我想使用指南针中的一些mixins，例如我想使用指南针的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));
    }
sass mixins compass

1 回答

  • 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来处理百分比 .

    回复于

相关问题