在SASS地图中创建模块化比例尺ms范围的值

Question

我想做的是

• 通过一个map $断点循环，
• 拉出每个断点的最小值，
• 计算em值，
$ms-range

这段代码需要产生一个像这样的变量:

$ms-range:
1.2      20em,
1.333    30em,
1.618    40em,
1.8      50em,
2        60em;

我无法让函数返回我想要的格式。也许是地图扩展?!我不知道。我需要一个SASS大师!

SASS

:

$breakpoints: ( s: (320, 479), sm: (480, 767), m: (768, 1023), l: (1024, 1439), xl: (1440, null));

@function returnThatMap() {
    @each $name, $values in $breakpoints {
        @for $i from 1 through length($name) {
          $min: nth($values, 1);
          // if the last one
          @if ($i == length($name))  {
            @return 'calc($i * 1.2)  $min / 16 * 1em'
          }
          // if not the last one
          @else {
            @return 'calc($i * 1.2)  $min / 16 * 1em',
          }
        }
    }
}
$ms-range : returnThatMap() ;

// OUTPUT FORMAT NEEDED below!! (dummy numbers, but correct syntax - ie. number ' ' [number]em,number ' ' [number]em, number ' ' [number]em;)
// $ms-range:
//   1.2      20em,
//   1.333    30em,
//   1.618    40em,
//   1.8      50em,
//   2        60em;

SASSMEISTER链接:http://www.sassmeister.com/gist/700f0721fd7940c84435cb1b5210f5d7

Answer 1

我注意到一些事情可以做一些修复

• 如果你想让函数返回一个像$ms-range那样的列表，你不应该在每次迭代中返回，而是返回一个在循环结束时生成的列表

• 这部分代码'calc($i * 1.2) $min / 16 * 1em'将始终返回一个字符串，不会执行任何计算，所以最好只执行必要的计算

• 当您在代码中使用length($name)时，我假设代码的一部分是指length(s), length(sm)等。这将始终返回1，因为它将被解释为只有一项的列表。相反，您应该使用str-length，它将返回字符串字符的长度。

我也不完全理解你的@if - @else语句的目的，因为它们在它们的块@return 'calc($i * 1.2) $min / 16 * 1em'

中包含相同的代码

根据我对您要完成的任务的理解，代码应该是这样的

breakpoints: (  s: (320, 479),
                sm: (480, 767),
                 m: (768, 1023),
                 l: (1024, 1439),
                xl: (1440, null));
@function returnThatMap() {
  $map: ();
  @each $name, $values in $breakpoints {
    $min: nth($values, 1); //This assumes that the first value is always the minimum
    // $min: min($values...); //This in built function can find the minimum between two values as long as they are both integers and might be a better option
    $key: str-length($name) * 1.2;
    $value: ($min / 16) * 1em;
    $map: append($map, ($key $value), comma);
  }
  @return $map;
}
$ms-range : returnThatMap() ;
@debug $ms-range; // 1.2 20em, 2.4 30em, 1.2 48em, 1.2 64em, 2.4 90em}

希望能有所帮助