本地计算机上SCSS函数的返回值与Codepen上的返回值不同

我正在尝试重新创建 Twitter Heart Animation ，并且正在关注 this tutorial 。我通过在box-shadow伪元素上添加::after来在心脏周围添加了一些粒子。此处，粒子数等于box-shadow上的::after个粒子。

问题是心脏周围圆形路径上的粒子分布。正如您在图像中看到的那样，一个粒子（左侧）不在正确的位置。

然后，我创建一个Pen at Codepen，以便我分享我的问题。但正如您在Pen中所见，粒子在此处（笔上）均匀分布。

然后，我在Pen和本地计算机上都检查了box-shadow值，发现一个值存在差异。

来自Codepen

box-shadow: 0rem -14.0625rem 0 0.25rem #ff8080,2.4419274984rem -13.8488590267rem 0 0.25rem #ff9580,4.8096582655rem -13.2144274798rem 0 0.25rem #ffaa80,7.03125rem -12.1784822407rem 0 0.25rem #ffbf80,9.0392007612rem -10.7724999814rem 0 0.25rem #ffd580,10.7724999814rem -9.0392007612rem 0 0.25rem #ffea80,12.1784822407rem -7.03125rem 0 0.25rem #ffff80,13.2144274798rem -4.8096582655rem 0 0.25rem #eaff80,13.8488590267rem -2.4419274984rem 0 0.25rem #d5ff80,14.0625rem 0rem 0 0.25rem #bfff80,13.8488590267rem 2.4419274984rem 0 0.25rem #aaff80,13.2144274798rem 4.8096582655rem 0 0.25rem #95ff80,12.1784822407rem 7.03125rem 0 0.25rem #80ff80,10.7724999814rem 9.0392007612rem 0 0.25rem #80ff95,9.0392007612rem 10.7724999814rem 0 0.25rem #80ffaa,7.03125rem 12.1784822407rem 0 0.25rem #80ffbf,4.8096582655rem 13.2144274798rem 0 0.25rem #80ffd5,2.4419274984rem 13.8488590267rem 0 0.25rem #80ffea,0rem 14.0625rem 0 0.25rem #80ffff,-2.4419274984rem 13.8488590267rem 0 0.25rem #80eaff,-4.8096582655rem 13.2144274798rem 0 0.25rem #80d5ff,-7.03125rem 12.1784822407rem 0 0.25rem #80bfff,-9.0392007612rem 10.7724999814rem 0 0.25rem #80aaff,-10.7724999814rem 9.0392007612rem 0 0.25rem #8095ff,-12.1784822407rem 7.03125rem 0 0.25rem #8080ff,-13.2144274797rem 4.8096582655rem 0 0.25rem #9580ff,-13.8488590264rem 2.4419274985rem 0 0.25rem #aa80ff,-14.0624999989rem 1e-10rem 0 0.25rem #bf80ff,-13.8488590232rem -2.4419274979rem 0 0.25rem #d580ff,-13.214427469rem -4.8096582639rem 0 0.25rem #ea80ff,-12.1784822093rem -7.031249995rem 0 0.25rem #ff80ff,-10.7724998942rem -9.0392007466rem 0 0.25rem #ff80ea,-9.03920053rem -10.7724999409rem 0 0.25rem #ff80d5,-7.0312494117rem -12.1784821333rem 0 0.25rem #ff80bf,-4.8096568251rem -13.2144272058rem 0 0.25rem #ff80aa,-2.4419240942rem -13.8488583531rem 0 0.25rem #ff8095;

在我的本地计算机上

box-shadow: 0rem -14.0625rem 0 0.25rem #ff8080,-14.0624999989rem 1.4260661015rem 0 0.25rem #bf80ff,-2.4419240942rem -13.8488583531rem 0 0.25rem #ff8095;

您可以在底部第9行看到不同的y-offset：1e-10rem和1.4260661015rem。

我想知道即使代码相同也怎么会发生以及为什么会发生这种情况。

注意 ：我正在使用从 npm 安装的“ sass”：“ ^ 1.23.3”。 谢谢。

编辑1：代码

/*
These mathematicle functions are copied from
https://www.unindented.org/blog/trigonometry-in-sass/
*/
@function pow($number,$exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  } @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function pi() {
  @return 3.14159265359;
}

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);
  // If the angle has 'deg' as unit,convert to radians.
  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}

@function sin($angle) {
  $sin: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1,$i) * pow($angle,(2 * $i + 1)) / fact(2 * $i + 1);
  }
  @return $sin;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1,2 * $i) / fact(2 * $i);
  }
  @return $cos;
}

@function tan($angle) {
  @return sin($angle) / cos($angle);
}

$heart-hover: #fb496a;
$heart-default: #aab8c2;
$heart-checked: #ed143d;

$bubble-initial-color: $heart-checked;
$bubble-final-color: #cc8ef5;

$heart-size: 10rem;

$bubble-diameter: 2.25 * $heart-size;
$bubble-radius: $bubble-diameter / 2;

$particle-diameter: $heart-size / 20;
$particle-radius: $particle-diameter / 2;

@mixin particles ($k) {
  $shadow-list: ();
  $number-group: 36;
  $group-base-angle: 360deg / $number-group;
  $group-spread-radius: (1 + $k * 0.25) * $bubble-radius;
  $spread-radius: 1 * $k * $particle-radius;

  @for $i from 0 to $number-group {
    $group-angle: $i * $group-base-angle - 90deg;
    $x-group: $group-spread-radius * cos($group-angle);
    $y-group: $group-spread-radius * sin($group-angle);

    $shadow-list: $shadow-list,$x-group $y-group 0 $spread-radius hsl($i * $group-base-angle,100%,75%);
  }

  box-shadow: $shadow-list;
}

@keyframes heart {
  0%,17.5% {
    font-size: 0;
  }
}

@keyframes bubble {
  15% {
    border: $bubble-radius solid $bubble-initial-color;
    transform: scale(1);
  }
  30%,100% {
    border: 0 solid $bubble-final-color;
    transform: scale(1);
  }
}

@keyframes particles {
  0%,20% {
    opacity: 0;
    @include particles(1);
  }
  25% {
    opacity: 1;
    @include particles(0);
  }
}

*,*::before,*::after {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font: 1em verdana,sans-serif;
  background: linear-gradient(135deg,#121721,#000);
}


// Heart Baics
.twitter-heart {
  z-index: 1;

  & > input[id='heart'] {
    display: none;

    &:checked + label[for='heart'] {
      color: $heart-checked;
      will-change: font-size;
      animation: heart 1s cubic-bezier(.17,.89,.32,1.49);
    }
  }

  & > label[for='heart'] {
    font-size: $heart-size;
    color: $heart-default;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: color .2s ease;

    &:hover {
      color: $heart-hover;
    }
  }
}

// Heart Bubble
.twitter-heart {
  & > input[id='heart'] {
    &:checked + label[for='heart'] {
      &::before,&::after {
        animation: inherit;
        animation-timing-function: cubic-bezier(.21,.61,.35,1);
      }

      &::before {
        animation-name: bubble;
      }
    }
  }

  & > label[for='heart'] {
    position: relative;

    &::before,&::after {
      position: absolute;
      top: 50%;
      left: 50%;
      content: '';
      z-index: -1;
      border-radius: 50%;
    }

    &::before {
      width: $bubble-diameter;
      height: $bubble-diameter;
      margin: -1*$bubble-radius;
      border: $bubble-radius solid $bubble-initial-color;
      transform: scale(0);
    }
  }
}

// Particles Around Bubble
.twitter-heart {
  & > input[id='heart'] {
    &:checked + label[for='heart'] {
      &::after {
        animation-name: particles;
      }
    }
  }
  & > label[for='heart'] {
    &::after {
      width: $particle-diameter;
      height: $particle-diameter;
      margin: -1 * $particle-radius;
      @include particles(1);
    }
  }
}

<div class="twitter-heart">
  <input type="checkbox" name="heart" id="heart" />
  <label for="heart">❤</label>
</div>

本地计算机上SCSS函数的返回值与Codepen上的返回值不同

dibatian 回答：本地计算机上SCSS函数的返回值与Codepen上的返回值不同

大家都在问