Как передать миксин в качестве параметра другого миксина в SASS

У меня есть миксин, который преобразует 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; }

Но я хотел бы использовать некоторые миксины из компаса, и, например, я хочу использовать радиус границы из компаса.


    .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
person freeman76    schedule 05.03.2015    source источник
comment
возможный дубликат Интерполяция Sass имен миксинов, функций и переменных   -  person cimmanon    schedule 06.03.2015
comment
@ freeman76 это немного не в контексте, но border-radius не требует префиксов caniuse.com/#search = радиус границы. Также подумайте, какие свойства нужно преобразовать в rem, например, border-radius не обязательно должен быть в rem, поскольку вам понадобится больше абсолютного значения.   -  person Vangel Tzo    schedule 06.03.2015
comment
Привет, Вангель, вы правы, я не взял лучший пример для префиксов :) однако, что касается использования блока rem для border-radius, я думаю, что это не повредит, если пользователь изменит свой базовый размер шрифта и текст становится действительно большим, тогда углы скорректируются соответствующим образом.   -  person freeman76    schedule 07.03.2015

Ответы (1)


arrow_upward
3
arrow_downward

Вы не можете сложить два миксина так, как вам хотелось бы. Так что вам просто нужно заставить миксин rem делать то, что вы хотите. Поэтому я написал новый код, чтобы справиться с этим за вас.

@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 в конец миксина, вот так ...

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

В противном случае, если вам не нужны префиксы для свойства, такого как fon-size или чего-то еще, вы просто не добавляете последнее значение, подобное этому ...

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

У меня есть рабочая демонстрация здесь ...

* Также на стороне примечания я изменил этот миксин, чтобы также обрабатывать проценты.

person Richard Dell Donatoni    schedule 07.03.2015
comment
Привет, Ричард, большое спасибо за ответ. У меня есть один вопрос, для% единиц, не лучше ли оставить его в процентах? Или процент здесь был бы больше для font-size? - person freeman76; 07.03.2015
comment
Привет @ freeman76. Совершенно никаких проблем. Извините, но я не думаю, что полностью понял ваш вопрос. Я думаю, что сделанное мной ниже примечание о процентах могло сбить с толку. Короче говоря, все, что я пытался сказать, это то, что этот миксин позволяет вам использовать% единиц вроде этого @include rem (margin-right, 10%) ;. Таким образом, вы можете делать все остальное так же, как и для таких размеров шрифта @include rem (font-size, 16px) ;. Так что не зацикливайтесь на процентах. Просто знайте, что теперь, если вы передадите модуль% в миксин, он не потерпит неудачу, как раньше. - person Richard Dell Donatoni; 08.03.2015