css - 如何在 SASS 中设置不同的值？

Question

你好，我尝试使用 while 循环创建 padding-top 类，但我的查询是当循环值是绝对值而不是像这样打印此类:.padding-top-5{padding-top:5%} 之后比我想要打印这个输出的 vlaue 在类名中添加这个 'half-' 这个词当值像这样的时候:.padding-上半部分 5{padding-top:5%}。任何解决方案请帮助我。提前致谢。

此处为 SASS 代码:

$spacing-top: 5;
@while $spacing-top < 7 {
  .padding-top-#{$spacing-top} {
    padding-top: unquote(#{$spacing-top})+'%';
  }
  $spacing-top: $spacing-top + 0.5;
}

CSS 输出在这里:

.padding-top-5{padding-top:5%}
.padding-top-5.5{padding-top:5.5%}
.padding-top-6{padding-top:6%}
.padding-top-6.5{padding-top:6.5%}

我想要这种类型的类名:

.padding-top-5{padding-top:5%}
.padding-top-half-5.5{padding-top:5.5%}
.padding-top-6{padding-top:6%}
.padding-top-half-6.5{padding-top:6.5%}

Answer 1

终于得到了程序员的帮助，特别感谢 Satish Dubariya 和 Aasim Goriya。

$spacing-top: 5;
$full: '';
$half : false;
@while $spacing-top < 7 {
  @if $half {
    $full : '-half';
    $half: false;
  } @else {
    $full: '';
    $half: true;
  }
  .padding-top#{$full}-#{floor($spacing-top)} {
    padding-top: unquote(#{$spacing-top})+'%';
  }
  $spacing-top: $spacing-top + 0.5;
}