Использование пройденной переменной как пары «ключ/значение» в Mixins

Question

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

Я создаю mixin в SASS, позволяя мне создавать ключевые кадры, передавая имя анимации от значения и до значения. Вот пример:

@mixin keyframes($name, $from, $to) { 
    @-webkit-keyframes #{$name} { 
     from { 
      left: $from 
     } 
     to { 
      left: $to 
     } 
    } 
} 

Это сокращенный вариант, как я хотел бы также добавить строки для @ -moz-ключевых кадров и @keyframes. Я предпочитаю этот метод, так что мне не нужно повторять «от» и «до» в анимации и иметь mixin просто захватить его с помощью @content, но я также не хочу предполагать, что «левый» является единственным свойство, которое будет затронуто.

То, что я хотел бы сделать, относится как к переменным $, так и к переменным как к объектам, так что они могут содержать ряд пар ключ/значение. Когда я пытаюсь это:

$mixin keyframes($name, $from, $to) { 
    @-webkit-keyframes #{$name} { 
     from { 
      $from 
     } 
     to { 
      $to 
     } 
    } 
} 

... Я получаю ошибки компиляции, потому что это за исключением ключ/значение пары, а не переменной.

Есть ли способ сказать SASS рассматривать $ from и $ как серию пар ключ/значение? Я уже пробовал # {$ from}, и он все еще бросает эту ошибку компиляции.

Спасибо!

Answer 1

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

@mixin keyframes($name, $from, $to) { 
    @-webkit-keyframes #{$name} { 
     from { 
      @each $prop, $val in $from { 
       #{$prop}: $val; 
      } 
     } 
     to { 
      @each $prop, $val in $to { 
       #{$prop}: $val; 
      } 
     } 
    } 
} 

@include keyframes(foo, (top: 10px), (top: 50px)); 

Однако я бы рекомендовал не делать этого вообще, если ваша цель состоит в том, чтобы написать гибкий подмешать. Просто напишите свои собственные из/в отчеты:

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

@include keyframes(foo) { 
    from { 
    top: 10px; 
    } 

    to { 
    top: 50px; 
    } 
}