循环数组sass并创建css

Question

我在sass中有一个函数，如下所示

$positions: left top bottom right;
$short-paddings: lp tp bp rp;
@each $current-position in $positions {
  $i: index($positions, $current-position);
  @for $x from 1 through 2 {
     @each $current-short in $short-paddings{
      .#{$current-short}-#{$x} {
        padding-#{$current-position}: #{$x}px !important;

      }
    }
  }
}

当我做输出时，我得到了这样的结果

.pl-1 {
  padding-left: 1px !important;
}

.pt-1 {
  padding-left: 1px !important;
}

.pb-1 {
  padding-left: 1px !important;
}

.pr-1 {
  padding-left: 1px !important;
}

.pl-2 {
  padding-left: 2px !important;
}

.pt-2 {
  padding-left: 2px !important;
}

.pb-2 {
  padding-left: 2px !important;
}

.pr-2 {
  padding-left: 2px !important;
}

.pl-1 {
  padding-top: 1px !important;
}

.pt-1 {
  padding-top: 1px !important;
}

.pb-1 {
  padding-top: 1px !important;
}

.pr-1 {
  padding-top: 1px !important;
}

.pl-2 {
  padding-top: 2px !important;
}

.pt-2 {
  padding-top: 2px !important;
}

.pb-2 {
  padding-top: 2px !important;
}

.pr-2 {
  padding-top: 2px !important;
}

.pl-1 {
  padding-bottom: 1px !important;
}

.pt-1 {
  padding-bottom: 1px !important;
}

.pb-1 {
  padding-bottom: 1px !important;
}

.pr-1 {
  padding-bottom: 1px !important;
}

.pl-2 {
  padding-bottom: 2px !important;
}

.pt-2 {
  padding-bottom: 2px !important;
}

.pb-2 {
  padding-bottom: 2px !important;
}

.pr-2 {
  padding-bottom: 2px !important;
}

.pl-1 {
  padding-right: 1px !important;
}

.pt-1 {
  padding-right: 1px !important;
}

.pb-1 {
  padding-right: 1px !important;
}

.pr-1 {
  padding-right: 1px !important;
}

.pl-2 {
  padding-right: 2px !important;
}

.pt-2 {
  padding-right: 2px !important;
}

.pb-2 {
  padding-right: 2px !important;
}

.pr-2 {
  padding-right: 2px !important;
}

但是有一些错误的css，我需要输出的是，在最终的css中，我会有一些东西=this

.pl-1 {
  padding-left: 1px !important;
}

.pt-1 {
  padding-top: 1px !important;
}

.pb-1 {
  padding-bottom: 1px !important;
}

.pr-1 {
  padding-right: 1px !important;
}

.pl-2 {
  padding-left: 2px !important;
}

.pt-2 {
  padding-top: 2px !important;
}

.pb-2 {
  padding-bottom: 2px !important;
}

.pr-2 {
  padding-right: 2px !important;
}

知道我哪里做错了吗？

Answer 1

第一个循环@each $current-position in $positions导致了您的问题。您可以删除它，并使用地图实现您想要的功能：

$short-paddings: (
  top: 'pt',
  left: 'pl',
  bottom: 'pb',
  right: 'pr'
);

@for $i from 1 through 2 {
  @each $position, $prefix in $short-paddings {
    .#{$prefix}-#{$i} {
      padding-#{$position}: #{$i}px !important;
    }
  }
}

SASS Maps documentation