创造价值

Question

我所试图做的是

• 循环通过地图$断点，
• 拉出最小值为每个断点，
• 计算基于每一个EM值，
• 然后使用这些对于这个代码需要商品的全球地图$ MS-范围

可变的，看起来像这样：

$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 LINK： http://www.sassmeister.com/gist/700f0721fd7940c84435cb1b5210f5d7

Answer 1

一对夫妇的事情，我注意到，可以用一些固定

• 如果你想要的功能做返回中的列表你不应该在每次迭代中返回，而是返回多数民众赞成在循环

• 你的这部分代码'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} 

希望这有助于