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

Question

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

Answer 1

Вы не можете добавить два Примеси вместе так, как вы хотите. Поэтому вам просто нужно заставить 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; 
    } 
} 

Теперь все, что вам нужно сделать, добавить префиксы к любой собственности добавить истинное значение в конце Mixin как так ...

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

В противном случае, если вы не хотите каких-либо указан префикс на имущество, как Fon размера или что-то вы просто не добавить последнее значение, как так ...

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

у меня есть рабочий пример here...

* Также на боковой ноте я модифицировал этот mixin для обработки процентов.