SASS检查当前回路是否包含部分输入

我有一个名为

$ratings list

的数组，我正在尝试遍历该数组，如果

$current class

包含

.5

，则使用css的a段，否则使用不同的段

$ratings-list: 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5;

  @each $current-class in $ratings-list {
    $i: index($ratings-list, $current-class);
    &[data-rating="#{$current-class}"] {
      @if (index($current-class, .5)) {
        .rating-stars__star:nth-child(-n+#{floor($current-class)}) .ratings-star {
          height: floor($current-class);
        }
      } @else {
        .rating-stars__star:nth-child(-n+#{$i}) .ratings-star {
          height: 7px;
        }
      }
    }
  }

---

上面的代码总是返回

else

高度：7px

段。

您可以将$current class转换为字符串并使用str index代替

$ratings-list: 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5;

  @each $current-class in $ratings-list {
    $i: index($ratings-list, $current-class);
    [data-rating="#{$current-class}"] {
      @if (str-index(#{"" + $current-class}, '.5')) {
        .rating-stars__star:nth-child(-n+#{floor($current-class)}) .ratings-star {
          height: floor($current-class);
        }
      } @else {
        .rating-stars__star:nth-child(-n+#{$i}) .ratings-star {
          height: 7px;
        }
      }
    }
  }

编译成

[data-rating="1"] .rating-stars__star:nth-child(-n+1) .ratings-star {
  height: 7px;
}

[data-rating="1.5"] .rating-stars__star:nth-child(-n+1) .ratings-star {
  height: 1;
}

[data-rating="2"] .rating-stars__star:nth-child(-n+3) .ratings-star {
  height: 7px;
}

[data-rating="2.5"] .rating-stars__star:nth-child(-n+2) .ratings-star {
  height: 2;
}

[data-rating="3"] .rating-stars__star:nth-child(-n+5) .ratings-star {
  height: 7px;
}

[data-rating="3.5"] .rating-stars__star:nth-child(-n+3) .ratings-star {
  height: 3;
}

[data-rating="4"] .rating-stars__star:nth-child(-n+7) .ratings-star {
  height: 7px;
}

[data-rating="4.5"] .rating-stars__star:nth-child(-n+4) .ratings-star {
  height: 4;
}

[data-rating="5"] .rating-stars__star:nth-child(-n+9) .ratings-star {
  height: 7px;
}

---

您可以将$current类转换为字符串，并改用str索引

$ratings-list: 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5;

  @each $current-class in $ratings-list {
    $i: index($ratings-list, $current-class);
    [data-rating="#{$current-class}"] {
      @if (str-index(#{"" + $current-class}, '.5')) {
        .rating-stars__star:nth-child(-n+#{floor($current-class)}) .ratings-star {
          height: floor($current-class);
        }
      } @else {
        .rating-stars__star:nth-child(-n+#{$i}) .ratings-star {
          height: 7px;
        }
      }
    }
  }

编译成

[data-rating="1"] .rating-stars__star:nth-child(-n+1) .ratings-star {
  height: 7px;
}

[data-rating="1.5"] .rating-stars__star:nth-child(-n+1) .ratings-star {
  height: 1;
}

[data-rating="2"] .rating-stars__star:nth-child(-n+3) .ratings-star {
  height: 7px;
}

[data-rating="2.5"] .rating-stars__star:nth-child(-n+2) .ratings-star {
  height: 2;
}

[data-rating="3"] .rating-stars__star:nth-child(-n+5) .ratings-star {
  height: 7px;
}

[data-rating="3.5"] .rating-stars__star:nth-child(-n+3) .ratings-star {
  height: 3;
}

[data-rating="4"] .rating-stars__star:nth-child(-n+7) .ratings-star {
  height: 7px;
}

[data-rating="4.5"] .rating-stars__star:nth-child(-n+4) .ratings-star {
  height: 4;
}

[data-rating="5"] .rating-stars__star:nth-child(-n+9) .ratings-star {
  height: 7px;
}