2016-11-17 13 views
0

は、マップ$ブレークポイントを通じて作成値Iがやろうとしています何

  • ループであり、
  • は計算
  • 、各ブレークポイント分間価値を引き出します各々に基づいてEM値、
  • は、このコードは、製品aに必要

グローバルマップの$ 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

答えて

1

私はあなたが機能をしたい場合は、そのいくつかは

  • を固定して行うことができます気づいた物事のカップルのようなリストを返すあなたは、各反復で返すのではなく、それがベストですので、ループ

  • 'calc($i * 1.2) $min/16 * 1em'は常に文字列を返しますし、任意の計算を実行しませんあなたのコードのこの部分の最後に生成されていますリストを返すべきではありませんあなたのコードでlength($name)を使用するときだけ必要な計算

  • を実行するために、私は、コードの一部が、length(s)を参照length(sm)というようにされると仮定しています。これはただの1つの項目を持つリストとして解釈されるので、常に1を返します。代わりにstr-lengthを使用して、という文字の長さをに戻す必要があります。

また、私は完全にあなた@ifの目的を把握していない - の両方が、あなたが達成しようとしているものの私の理解では、そのブロック@return 'calc($i * 1.2) $min/16 * 1em'

内の同じコード、コードが含まれているよう@else文をこの

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} 

希望のようになります。この

+0

AMAZING作業に役立ちます!仲間を助けてくれてありがとう。コード内のコメントは非常に感謝しています。 –

+0

問題ありません!お力になれて、嬉しいです :) –

関連する問題