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

1 个答案: