7

I have a mixin that converts px to rem PX TO REM, I have this code:


    .button {
        @include rem(font-size, 24px);
        @include rem(padding, 10px);
        @include rem(border-radius, 5px);
    }

This would produce this CSS:


    .button {
        font-size: 1.5rem;
        padding: 0.625rem;
        border-radius: 0.3125rem; }

But I'd like to use some mixins from compass and for example I want to use border-radius from compass


    .box {
        @include border-radius(10px);
    }

And it would generate this CSS:


    .box {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px; }

Is there a way to do something like this:


    .box {
        @include rem(@include border-radius(10));
    }
freeman76
  • 143
  • 1
  • 5
  • possible duplicate of [Sass Interpolation of Mixin, Function, and Variable names](http://stackoverflow.com/questions/16152547/sass-interpolation-of-mixin-function-and-variable-names) – cimmanon Mar 05 '15 at 22:12
  • @freeman76 it'a a bit out of context but `border-radius` doesn't need prefixes http://caniuse.com/#search=border-radius. Also consider which properties need to convert into rems, for example border-radius doesn't need to be on rem since you'll need more an absolute value. – Vangel Tzo Mar 06 '15 at 08:34
  • Hi Vangel, you are right, I didn't take the best example for the prefixes :) however regarding using rem unit for border-radius, I think it wouldn't hurt, if the user changes his base font-size and the text becomes really big, then the corners will adjust accordingly. – freeman76 Mar 07 '15 at 12:50

1 Answers1

3

You can't add two mixins together the way you'd like. So you just have to make the rem mixin do what you want it to do. So I wrote new code to handle that for you.

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

Now all you have to do add prefixes to any property is add the value true to the end of the mixin like so...

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

Otherwise if you don't want any prefixs on property like fon-size or something you just don't add a last value like so...

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

I have a working demo here...

*Also on a side note I modified this mixin to handle percentages too.

Richard Dell Donatoni
  • 89
  • 1
  • 6
  • Hi Richard, thank you very much for your reply. I have one question, for % units, wouldn't it be better to keep it in percentages? Or the percentage here would be more for font-size? – freeman76 Mar 07 '15 at 12:56
  • Hi @freeman76. No problem at all. I'm sorry but, I don't think I totally get your question though. I think that note I made at the bottom about percentages might have been confusing. Long story short all I was trying to say is this mixin allows you use % units like this "@include rem(margin-right, 10%);". So you can still doing everything else the same same like for font sizes like this "@include rem(font-size, 16px);". So don't get hung up on the percentage thing. Just know that now if you do pass a % unit into the mixin and it won't fail like it would before. – Richard Dell Donatoni Mar 07 '15 at 23:21