創造價值

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} 

希望這有助於