gulp-css-comb 问题：“请检查有效性”答案

【问题标题】：Issue with gulp-css-comb : "Please check the validity"gulp-css-comb 问题：“请检查有效性”
【发布时间】：2018-01-15 10:30:19
【问题描述】：

我正在尝试修复我的 gulp-ccs-comb 任务，但出现此错误：

MacBook-Pro:myProject remy$ gulp sass-comb
[11:23:10] Using gulpfile ~/myproject/gulpfile.js
[11:23:10] Starting 'sass-comb'...
[11:23:10] Finished 'sass-comb' after 5.88 ms

events.js:183
      throw er; // Unhandled 'error' event
      ^
Error: /myPath/sass/helpers/_helpers.scss
Parsing error: Please check the validity of the block starting from line #6

4 | @each $className in $list {
5 |   @for $i from 0 through 100 {
6*|     @if $i % 5 == 0 {
7 |       @each $positionName in $listPosition {
8 |         .#{$className}#{$positionName}-#{$i} {

Gonzales PE version: 3.0.0-28

SCSS 文件：

$list: margin padding;
$listPosition: top bottom left right;

@each $className in $list {
  @for $i from 0 through 100 {
    @if $i % 5 == 0 {
      @each $positionName in $listPosition {
        .#{$className}#{$positionName}-#{$i} {
          #{$className}-#{$positionName}: #{$i}px !important;
        }
      }
      .#{$className}-#{$i} {
        #{$className}: #{$i}px !important;
      }
    }
  }
}

我在我的 scss 语法中做错了什么？

感谢您的帮助:)

雷米。

【问题讨论】：

看来问题出在百分比模数运算符上。 Csscomb 不喜欢它。我有其他解决方案吗？
您是否尝试将条件括起来，即。 @if( $i % 5 == 0 ) { ?

标签： sass gulp formatting csscomb

【解决方案1】：

尝试将@for 和@if 更改为@while。

$list: margin padding;
$listPosition: top bottom left right;

@each $className in $list {
  $i: 0;
  @while $i <= 100 {
    @each $positionName in $listPosition {
      .#{$className}#{$positionName}-#{$i} {
        #{$className}-#{$positionName}: #{$i}px !important;
      }
    }
    .#{$className}-#{$i} {
      #{$className}: #{$i}px !important;
    }
    $i: $i + 5;
  }
}

它对我有用（以及你的代码:)

【讨论】：