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函数，列表作为参数

1 个答案: