Возвращаемое значение функции SCSS на локальном компьютере отличается от значения на коде - PullRequest
Новая
       8

Возвращаемое значение функции SCSS на локальном компьютере отличается от значения на коде

0 голосов
/ 07 ноября 2019

Я пытаюсь воссоздать Twitter Heart Animation и следил за этим уроком . Я добавил несколько частиц вокруг Heart в круг, добавив box-shadow к ::after псевдоэлементу. Здесь число частиц равно числу box-shadow с на ::after.

Проблема заключается в распределении частиц по круговому пути вокруг Сердца. Как вы можете видеть на изображении, одна частица (слева) находится не в правильном положении.

Distribution of particles around heart on Local machine

После этого я создаю Ручка в Codepen , чтобы я мог поделиться своей проблемой. Но, как вы можете видеть это в Pen , Частицы распределены здесь (на ручке) равномерно.

Distribution of particles around heart on codepen

Тогда яИзучите значения box-shadow как на Pen, так и на моем локальном компьютере, и я обнаружу разницу в одном значении.

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моя локальная машина 

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;

Вы можете увидеть различные y-offset в 9-й строке снизу: 1e-10rem и 1.4260661015rem.

Интересно, как и почему это произошлодаже когда коды совпадают.

Примечание : я использую "sass": "^ 1.23.3", который я установил с npm . Спасибо.

Редактировать 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>

1 Ответ

1 голос
/ 07 ноября 2019

Основной причиной получения различных css является разница в реализации. Как прокомментировал connexo

node-sass - это обертка вокруг libsass (реализация Sass в C), тогда как sass реализует Sass вJavaScript. Есть различия в этих реализациях относительно того, что производят эти компиляторы. Codepen использует Ruby Sass.

Использование node-sass решило проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...