将复杂的 Sass mixin 转换为 Stylus

Question

我正在 SCSS 中转换这个 mixin，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;
            }
        }
    }
}

到手写笔in this codepen

我在进行转换时发现了一些问题：

代码从 SCSS 到 Stylus 的自动转换不起作用，但我确实设法成功转换了最重要的部分。
表达式是正确的，但呈现在它们相应的标签之外，即使它们应该在每个标签内。

原创此代码的文章是 Smashing Mag 中的真正流畅的排版与 vh 和 vw 单位。

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

然后，要提取值的数量，您可以使用 unit() 函数：

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

生成的css代码与SCSS示例相同，参见codepen： https://codepen.io/blonfu/pen/LNwyJZ

将复杂的 Sass mixin 转换为 Stylus

Converting complex Sass mixin to Stylus

stylus

sass

responsive-design