Блог

Я хочу создать микс, который позволяет настраивать процентное соотношение на лету. Я немного запутался, хотел бы получить несколько советов.

Вот чего я хочу добиться:

    @keyframes slide-1 {
    0%   {transform: translate3d(0, 0, 0);}
    50%  { }
    100% {transform: translate3d(-100%, 0, 0);}
}

@keyframes slide-2 {
    0%   {transform: translate3d(0, 0, 0);}
    50%  { }
    100% {transform: translate3d(-200%, 0, 0);}
}
  

Mixin примет аргумент в процентах — и я предполагаю, что это название анимации? Что-то вроде:

 @keyframes $animation-name {
    0%   {transform: translate3d(0, 0, 0);}
    50%  { }
    100% {transform: translate3d($percentage, 0, 0);}
}
  

Вы можете добавить mixin где-нибудь в верхней части файла .sass непосредственно перед его вызовом. Или вы можете включить его из внешнего файла.

 @mixin animation-mixin($name, $from, $to) {
  @keyframes #{$name} {
    0% {transform: translate3d($from, 0, 0); opacity: 0;}
    100% {transform: translate3d($to, 0, 0); opacity: 1;}
  }
}
  

Вызовите mixin и передайте эти 3 значения $name , $from $to вот так:

 @include animation-mixin(slide-1, 0, 100%);
@include animation-mixin(slide-2, 0, 200%);
  

И это было бы переведено в это:

 @keyframes slide-1 {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
}
@keyframes slide-2 {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(200%, 0, 0);
    opacity: 1;
  }
}
  

ДЕМОНСТРАЦИЯ

HTML

 <div class="box-1"></div>
<div class="box-2"></div>
  

ДЕРЗКИЙ

 .box-1,
.box-2 {
  height: 20px;
  width: 20px;
  margin: 5px;
}
.box-1 {
  background-color: blue;
  animation: slide-1 2s ease infinite;
}
.box-2 {
  background-color: red;
  animation: slide-2 2s ease infinite;
}

@mixin animation-mixin($name, $from, $to) {
  @keyframes #{$name} {
    0% {transform: translate3d($from, 0, 0); opacity: 0;}
    100% {transform: translate3d($to, 0, 0); opacity: 1;}
  }
}

@include animation-mixin(slide-1, 0, 100%);
@include animation-mixin(slide-2, 0, 200%);
  

Вот общий пример, как это использовать: В вашем файле sass используйте микширование для добавления любого типа ключевого кадра:

 @mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
} 
  

Затем вы можете объявить нужную анимацию следующим образом:

 @include keyframes(animate-preloader) {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
  

И используйте его для анимации вашего html-элемента следующим образом:

 #yourElement{
    ...
    animation: animate-preloader 1s linear infinite;
}
  

Это позволит вам избежать повторяющегося кода.

Я создал Codepen, который использует метод из ответа Антона Конинга: https://codepen.io/Hakeemmidan/pen/OJPaezR

HTML:

<div></div>

SCSS:

 div {
  height: 100px;
  width: 100px;
  background-color: skyblue;
  margin: 60px auto;
  animation: skyblue-to-pink 2s ease infinite;
}

@mixin animation-mixin($name, $color1, $color2) {
  @keyframes #{$name} {
    0% {background-color: $color1;}
    50% {background-color: $color2;}
    100% {background-color: $color1;}
  }
}

@include animation-mixin(skyblue-to-pink, skyblue, pink);