Преобразование сложного Sass подмешать к Стилус

Question

Я преобразовывая это подмешать в SCSS, working example here

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) { 
    & { 
     @each $property in $properties { 
      #{$property}: $min-value; 
     } 

     @media screen and (min-width: $min-vw) { 
      @each $property in $properties { 
       #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw})/#{strip-unit($max-vw - $min-vw)})); 
      } 
     } 

     @media screen and (min-width: $max-vw) { 
      @each $property in $properties { 
       #{$property}: $max-value; 
      } 
     } 
    } 
} 

для Stylus in this codepen

я обнаружил ряд проблем, делая преобразование:

• Автоматическое преобразование кода из SCSS в Stylus не сработало, но мне удалось успешно преобразовать наиболее важные из них.
• Выражения верны, но визуализируются вне соответствующих тегов, хотя они должны находиться внутри каждого из них.

В статье, которая возникла этот код является Действительно Fluid Typography С ВХ И Vw Units в Smashing Mag.

Answer 1

Этот код стилус будет более или менее так:

fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) 
     & 
     for $property in $properties 
      {$property}: $min-value 
     @media screen and (min-width: $min-vw) 
      for $property in $properties 
      {$property}: "calc(%s + %s * ((100vw - %s)/%s))" %($min-value strip-unit($max-value - $min-value) $min-vw strip-unit($max-vw - $min-vw)) 
     @media screen and (min-width: $max-vw) 
      for $property in $properties 
      {$property}: $max-value 

Затем, чтобы извлечь число значение, которое вы можете использовать единичную функцию():

strip-unit($value) 
    unit($value, '') 

CSS-код сгенерированный код такой же, как пример SCSS, см. в кодексе: https://codepen.io/blonfu/pen/LNwyJZ