Sass 以列表为参数的函数

Question

我正在尝试创建我发现在 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

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

Answer 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');
      }
    }
}

Sass 以列表为参数的函数

Sass Function with list as argument

function

sass

mixins