以列表为参数的 Sass 函数答案

【问题标题】：Sass Function with list as argument以列表为参数的 Sass 函数
【发布时间】：2018-07-11 00:17:03
【问题描述】：

我正在尝试在 sass 中创建一个我认为非常复杂的函数。

目标：为 padding-top、padding-bottom、padding、margin-top 等创建各种辅助类。

我已经创建了一个 for 循环

@for $n from 10 through 160
    @if $n % 10 == 0
    .h-padding-#{$n}
        padding: #{$n}px 0

    .h-pt-#{$n}
        padding-top: #{$n}px

    .h-pb-#{$n}
        padding-bottom: #{$n}px

要生成类，但我现在想添加一个变体，这将使移动设备上的数字 #{n} 减半。

基本上：

.#{$utility-class-slug}-pb-#{$n}
    padding-bottom: #{$n}px

    +media("<=phone")
        padding-bottom: calc( #{$n}px / 2 )

我在这里尝试的是创建一个函数，这样我就不必每次都重复这个media...。

=generateProperty($property, $size...)
    #{$property}: nth($size, 1) + px nth($size, 2) + px

所谓的

+generateProperty(margin, $n, auto) 在margin: 0 auto 的情况下 +generateProperty(margin-top, $n) 在margin-top: $n 的情况下

虽然这不起作用，但我不知道我做错了什么，也不知道如何正确地构建它。

【问题讨论】：

标签： function sass mixins

【解决方案1】：

你可能需要稍微修改一下，但我希望它能让你朝着正确的方向前进：

@mixin genProp($prop, $value, $media: null) {
  #{$prop}: #{$value}px;

  @if ($media != null) {
    @media ($media) {
      #{$prop}: #{$value / 2}px;
    }
  }
}

@for $n from 10 through 160 {
    @if ($n % 10 == 0) {
      .h-padding-#{$n} {
        @include genProp('padding', #{$n}px 0);
      }

      .h-pt-#{$n} {
        @include genProp('padding-top', $n, 'max-width: 768px');
      }

      .h-pb-#{$n} {
        @include genProp('padding-bottom', $n, 'max-width: 768px');
      }
    }
}

【讨论】：