本地机器上的SCSS函数的返回值与codepen上的相同

Posted 2023-01-23

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

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

[之后，我创建了一个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, 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。

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

：我正在使用从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, $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>

答案

node-sass是libsass的包装（Sass中C的实现），而sass实现Sass中的javascript。这些实现与这些编译器产生的内容有所不同。 Codepen使用Ruby Sass。

使用node-sass解决了问题。