css - 将字符串解析为 SASS 中的映射

Question

我在 SASS 中有几个变量:

$tablet: 'max-width 48em';
$desktop: 'max-width 62em';

我希望在对变量进行迭代时将其视为单个实体。然而，它们随后需要作为映射传递到另一个 mixin。

@mixin rwd( $classes: (), $breakpoints: () ) {
  @content;
  @for $i from 1 through length($classes) {
    $breakpoint: unquote( nth($breakpoints, $i) );
    &---#{nth($classes, $i)} {
      @include media( $breakpoint ) {
        @content;
      }
    } 
  }
}

调用 @include rwd( upto-desktop, $upto-desktop ) { }

问题是当我使用 unquote 时在 SASS 中，结果不被视为 map 。

是否有我可以调用的 SASS 函数来将结果解析为 map ？或者任何替代方案？

Answer 1

虽然不能直接回答所提问题，但我找到了实现预期效果的更好方法。

通过将断点及其关联值创建为全局变量的映射，我通过将参数与映射键进行比较来简化了 rwd 混合宏。如果它存在，则在 media 混合中使用该键的值:

$breakpoints: (
  mobile: max-width 47.9375em,
  tablet: 48em,
  hd: 62em
);

@mixin rwd( $names: () ) {
  @content;

  @each $name in $names {
    @each $bp in $breakpoints {
      @if nth($bp,1) == $name {
        &---MQ#{nth($bp, 1)} {
          @include media( nth($bp, 2) ) {
            @content;
          }
        } 
      }
    }
  }
}

.black {
  @include rwd( mobile tablet hd ) {
    color: white;
    background: black;
  }
}

这将生成以下 CSS:

.black {
  color: white;
  background: black;
}
@media screen and (max-width: 47.9375em) {
  .black---MQmobile {
    color: white;
    background: black;
  }
}
@media screen and (min-width: 48em) {
  .black---MQtablet {
    color: white;
    background: black;
  }
}
@media screen and (min-width: 62em) {
  .black---MQhd {
    color: white;
    background: black;
  }
}

这种方法唯一需要注意的是，现在我不能简单地在 media 混合中使用 $mobile 变量，我必须使用 map -获取

有两种可能的方法:

创建一个从特定映射获取参数的辅助函数(为了方便起见，您可以给它起一个非常短的名称)。

@function bp( $bp ) {
  @return map-get( $breakpoints, $bp );
}

.blue {
  @include media ( bp(mobile) ) {
    background: blue;
    color: white;
  }
}

创建一个变量并将其赋值给map-get函数

$mobile: map-get( $breakpoints, mobile );

.red {
  @include media ( $mobile ) {
    background: red;
    color: white;
  }
}

在 Codepen 上编辑:http://codepen.io/craigmdennis/pen/Qydewy?editors=010