css - 本地机器上 SCSS 函数的返回值与 codepen 上的返回值不同

Question

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

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

之后，我创建了一个 Pen at Codepen这样我就可以分享我的问题。但正如您在 Pen 中看到的那样, 粒子在这里(笔上)均匀分布。

然后，我检查了 Pen 和本地机器上的 box-shadow 值，发现有一个值不同。

From 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;

From my local machine

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 1.4260661015rem 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;

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

我想知道即使代码相同，这种情况是如何发生的，为什么会发生。

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

Edit 1: Code

/*
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, $i) * pow($angle, 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>

Answer 1

产生不同css的主要原因是实现的不同。作为connexo评论

node-sass is a wrapper around libsass (an implementation of Sass in C), whereas sass implements Sass in JavaScript. There are differences in these implementations as of what these compilers produce. Codepen uses Ruby Sass.

使用 node-sass 解决了这个问题。