Переключайтесь между модулями :global и :local css для анимации элементов с помощью миксинов sass

Я хотел переключаться между :global и :local при использовании ключевых кадров и анимации, и приведенный ниже код работает:

@mixin keyframe ($animation_name, $isGlobal: false) {
  @if $isGlobal {
    @-webkit-keyframes :global(#{$animation_name}) {
      @content;
    }

    @-moz-keyframes :global(#{$animation_name}) {
      @content;
    }

    @keyframes :global(#{$animation_name}) {
      @content;
    }
  }

  @else {
    @-webkit-keyframes #{$animation_name} {
      @content;
    }

    @-moz-keyframes #{$animation_name} {
      @content;
    }

    @keyframes #{$animation_name} {
      @content;
    }
  }
}

@mixin animation (
  $animation_name,
  $duration,
  $isGlobal: false,
  $animation_timing_function: linear,
  $delay: 0,
  $fillmode: forwards,
  $direction: normal,
) {
  @if $isGlobal {
    :global {
      -webkit-animation-name: $animation_name;
      -webkit-animation-duration: $duration;
      -webkit-animation-timing-function: $animation_timing_function;
      -webkit-animation-delay: $delay;
      -webkit-animation-fill-mode: $fillmode;
      -webkit-animation-direction: $direction;

      -moz-animation-name: $animation_name;
      -moz-animation-duration: $duration;
      -moz-animation-timing-function: $animation_timing_function;
      -moz-animation-delay: $delay;
      -moz-animation-fill-mode: $fillmode;
      -moz-animation-direction: $direction;

      animation-name: $animation_name;
      animation-duration: $duration;
      animation-timing-function: $animation_timing_function;
      animation-delay: $delay;
      animation-fill-mode: $fillmode;
      animation-direction: $direction;
    }
  }
  @else {
    -webkit-animation-name: $animation_name;
    -webkit-animation-duration: $duration;
    -webkit-animation-timing-function: $animation_timing_function;
    -webkit-animation-delay: $delay;
    -webkit-animation-fill-mode: $fillmode;
    -webkit-animation-direction: $direction;

    -moz-animation-name: $animation_name;
    -moz-animation-duration: $duration;
    -moz-animation-timing-function: $animation_timing_function;
    -moz-animation-delay: $delay;
    -moz-animation-fill-mode: $fillmode;
    -moz-animation-direction: $direction;

    animation-name: $animation_name;
    animation-duration: $duration;
    animation-timing-function: $animation_timing_function;
    animation-delay: $delay;
    animation-fill-mode: $fillmode;
    animation-direction: $direction;
  }
}

Но, как вы можете заметить, некоторые строки кода повторяются. Я попробовал способ уменьшить дублирование, но, похоже, он не работает, так как код локализован:

@mixin keyframe ($animation_name, $isGlobal: false) {
  $updated_animation_name: $animation_name;

  @if $isGlobal {
    $updated_animation_name: (:global(#{$animation_name}));
  }

  @-webkit-keyframes #{$updated_animation_name} {
    @content;
  }

  @-moz-keyframes #{$updated_animation_name} {
    @content;
  }

  @keyframes #{$updated_animation_name} {
    @content;
  }
}

Есть ли решение минимизировать строку кода? Спасибо в ожидании

css sass css-animations scss-mixins

09.04.2019 10:56

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

392

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для @mixin keyframe вы можете сделать это:

@mixin keyframe ($animation_name, $isGlobal: false) {
  @if $isGlobal {
     $animation_name: #{':global('+$animation_name+')'};
  }

  @-webkit-keyframes #{$animation_name} {
     @content;
  }

  @-moz-keyframes #{$animation_name} {
     @content;
  }

  @keyframes #{$animation_name} {
     @content;
  }
}

Вы можете еще больше оптимизировать его с помощью цикла для добавления префиксов:

@mixin keyframe ($animation_name, $isGlobal: false) {
  @if $isGlobal {
    $animation_name: #{':global('+$animation_name+')'};
  }

  @each $prefix in moz, webkit {
    @-#{$prefix}-keyframes #{$animation_name} {
      @content;
    }
  }

  @keyframes #{$animation_name} {
    @content;
  }
}

Для второго первое, что вы можете сделать, это использовать миксин автопрефиксера, такой как это сделал Хьюго Жиродель:

@mixin prefix($declarations, $prefixes: ()) {
  @each $property, $value in $declarations {
    @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
    }

    // Output standard non-prefixed declaration
    #{$property}: $value;
  }
}

А затем включите его в @mixin animation:

@mixin animation (
  $animation_name,
  $duration,
  $isGlobal: false,
  $animation_timing_function: linear,
  $delay: 0,
  $fillmode: forwards,
  $direction: normal
) {
  @if $isGlobal {
    :global {
      @include prefix((
        animation-name: $animation_name,
        animation-duration: $duration,
        animation-timing-function: $animation_timing_function,
        animation-delay: $delay,
        animation-fill-mode: $fillmode,
        animation-direction: $direction
      ), webkit moz);
    }
  }
  @else {
    @include prefix((
      animation-name: $animation_name,
      animation-duration: $duration,
      animation-timing-function: $animation_timing_function,
      animation-delay: $delay,
      animation-fill-mode: $fillmode,
      animation-direction: $direction
    ), webkit moz);
  }
}

Оно работает. Мне просто нужно было удалить @ из @-#{$prefix}-keyframes #{$animation_name}. Это выдавало мне ошибку. В остальном работает без нареканий. Большое спасибо.

— 10.04.2019 10:02

Действительно? Я удивлен, что он дает вам ошибку, поскольку он компилируется прямо на моей стороне. Я рад, если это помогло!

— 10.04.2019 11:30

О, хорошо! Я не уверен, почему, но он не принимал @

— 11.04.2019 12:37

10.04.2019 09:26