Как передать несколько блоков контента в качестве аргументов в миксин? - PullRequest
Новая
       62

Как передать несколько блоков контента в качестве аргументов в миксин?

0 голосов
/ 15 октября 2019

Я хочу быть в состоянии сделать что-то вроде этого: 

.myTransitionableElement {
  transition: all .5s;

  .subChild { transition: all 1s }

  @include transitionKeyframes(
    start: {
      opacity: 0;
      transform: tranlsate(50px);

      .subChild {
        transform: rotate(45deg);
      }
    },
    end: {
      opacity: 1;
      transform: tranlsate(0);

      .subChild {
        transform: rotate(0);
      }
    }
  )
}


@mixin transitionKeyframes($args) {
  &.transitionStartKeyframe {
    @include map_get($args, "start");
  }
  &.transitionEndKeyframe {
    @include map_get($args, "end");
  }
}

Что в конце должно быть эквивалентно: 

.myTransitionableElement {
  transition: all .5s;

  .subChild { transition: all 1s }

  &.transitionStartKeyframe {
    opacity: 0;
    transform: tranlsate(50px);

    .subChild {
      transform: rotate(45deg);
    }
  }
  &.transitionEndKeyframe {
    opacity: 1;
    transform: tranlsate(0);

    .subChild {
      transform: rotate(0);
    }
  }
}

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

Ответы [ 2 ]

2 голосов
/ 15 октября 2019

Вы не можете передавать различный контент в качестве аргументов в миксинах SASS. Ниже приведен пример того, чего вы можете достичь, используя SASS. Можете ли вы указать, чего вы хотите достичь здесь? 

@mixin rtl() {
  &.ltr {
    @content;
    direction: ltr;
  }
  &.rtl {
    @content;
    direction: rtl;
  }
}

.parent {
  @include rtl {
   display: flex;
  }
}
0 голосов
/ 16 октября 2019

Вы можете попробовать разные подходы здесь. В этом конкретном случае я использую map для хранения данных для меня. Но если атрибуты и имена классов фиксированы;Вы даже можете упростить его. 

$map: (Start: (self: (opacity: '0', transform: 'tranlsate(50px)'), child: (transform: rotate(45deg))), End: (self: (opacity: '1', transform: 'tranlsate(0)'), child: (transform: rotate(0))));
$prefix: transition; $postfix: Keyframe;

@mixin transitionKeyframes($map) {
    @each $key, $val in $map {
    &.#{$prefix}#{$key}#{$postfix} {
      @each $attr, $prop in map-get($val, self) {
        #{$attr}: #{$prop};
      }

      .subChild {
        @each $attr, $prop in map-get($val, child) {
          #{$attr}: #{$prop};
        }
      }
    }
  }
}


.myTransitionableElement  {
  @include transitionKeyframes($map);
  transition: all .5s;
  .subChild { transition: all 1s }
}

Используйте миксины для повторяющихся задач. Измените миксин или $frames, если у вас есть много вариантов. Разбиваем opacity и transistion дальше на более мелкие миксины и вызываем их условно. 

$prefix: transition; $postfix: Keyframe;
$frames: 'Start', 'End';
$opcity-main: ('Start': 0, 'End': 1);
$translate-main: ('Start': 50, 'End': 0);

@mixin transitionKeyframes($frame) {
    @each $key in $frame {
    &.#{$prefix}#{$key}#{$postfix} {
      $opacity: map-get($opcity-main, $key);
      $translate: map-get($translate-main, $key);
      opacity: $opacity;
      transform: tranlsate($translate + px);
    }
  }
}


.myTransitionableElement  {
  @include transitionKeyframes($frames);
  transition: all .5s;
  .subChild { transition: all 1s }
}
...