React项目Sass文件报错：@for循环边界非整数问题排查

What's Causing This? #

The error pops up because Sass's @for loop requires both start and end values to be integers. In your code, the calculation ($point-count + 1) / 2 is returning a non-integer (like 6.5), which breaks the loop's rules—hence the build failure when running parcel build src/index.html.

Looking at your problematic code block:

@for $i from 1 through (($point-count + 1) / 2) {
  &:nth-of-type(#{$i}) {
    transform: rotate(360deg / $point-count * ($i - 1));
  }
  &:nth-of-type(#{$i + $point-count / 2}) {
    transform: rotate(180deg + 360deg / $point-count * ($i - 1));
  }
  &:nth-of-type(#{$i}), &:nth-of-type(#{$i + $point-count / 2}) {
    &:before {
      animation-delay: -$spin-animation-time + ($spin-animation-time / $point-count * 2 * ($i - 1));
    }
  }
}

When $point-count is an even number, ($point-count + 1) becomes odd, so dividing by 2 gives a fractional result. For example, if $point-count = 12, you get (12+1)/2 = 6.5—that's exactly what's triggering the error.

How to Fix It #

1. Force the End Value to Be an Integer (Recommended)

Use Sass's built-in integer functions to convert the calculation result to a whole number. Pick the one that fits your logic:

• floor(): Truncates the decimal (e.g., 6.5 → 6)

  @for $i from 1 through floor(($point-count + 1) / 2) {
    // Keep your existing loop content here
  }
  

• ceil(): Rounds up to the next integer (e.g., 6.5 → 7)

  @for $i from 1 through ceil(($point-count + 1) / 2) {
    // Keep your existing loop content here
  }
  

• round(): Rounds to the nearest integer (e.g., 6.5 → 7, 6.4 → 6)

2. Ensure $point-count Is an Odd Number

If your design expects $point-count to always be odd, check where this variable is defined and set it to an odd value. For example:

$point-count: 11; // (11 + 1)/2 = 6, which is an integer

This way, the loop's end value will always be a whole number without extra conversions.

3. Refactor the Loop Logic

If neither of the above works, restructure your loop to avoid fractional values entirely. For example, you could loop through all points directly and handle pairs in each iteration, or split the logic for even/odd $point-count cases.

Test the Fix #

After making your change, re-run parcel build src/index.html—the error should be gone. Be sure to test with different values of $point-count to make sure the loop produces the correct styling you need.

内容的提问来源于stack exchange，提问作者PHANTOM Xif