在SASS映射中为模块化缩放ms范围创建值

时间:2016-11-17 18:55:42

标签: sass maps modular-scale sass-maps

我想做的是

  • 循环遍历地图$ breakpoints,
  • 拉出每个断点的最小值,
  • 根据每个
  • 计算em值
  • 然后将这些用于全局地图$ ms-range

此代码需要生成如下所示的变量:

[HttpPost]
[Route("Generate/Report")]
public IHttpActionResult GetMyReport(MyData myData)
 {  
    byte[] myDoc = MyBusinessObject.GenerateMyReport(myData);
    var result = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = new ByteArrayContent(myDoc)
        };
        result.Content.Headers.ContentDisposition =
            new ContentDispositionHeaderValue("attachment")
            {
                FileName = "MyDocument.pdf"
            };
        result.Content.Headers.ContentType =
            new MediaTypeHeaderValue("application/octet-stream");

        var response = ResponseMessage(result);

        return response;
  }

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

SASS:

$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 个答案:

答案 0 :(得分: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}

希望这有帮助