Я использую @mixin для добавления различных свойств перехода к элементам. Скажем, у меня есть это в моем .scss:

@mixin transition($prop, $sec){
  -webkit-transition: $prop $sec;
  -moz-transition: $prop $sec;
  -ms-transition: $prop $sec;
  -o-transition: $prop $sec;
  transition: $prop $sec;
}

Тогда я звоню:

.sample{
  @include transition(background-color, 0.2s);
  @include transition(margin, 0.3s)
}

.sample имеет только переход полей, но мне также нужен переход цвета фона: есть ли простой способ заставить его работать?

Важно, что у меня разные звонки

0
towc 21 Апр 2014 в 21:19

3 ответа

Лучший ответ

В SASS нет способа объединить свойства, и я не знаю, существует ли внешний инструмент CSS для выполнения этой задачи. Sass был создан для улучшения возможностей CSS и не позволять программистам разрабатывать плохие методы программирования. Я действительно не знаю, зачем создавать несколько операторов объявления CSS, если вы можете сохранить их все в одном операторе. Сохранение всех ваших переходов в одном операторе значительно улучшает вашу структуру, рабочий процесс и производительность кода Sass.

Хорошо, это уже сказано, и, как вы упомянули ранее, «пусть будет ужасный кладж».

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

Микс в длинной форме

@mixin transition($properties, $durations, $timing-function: null, $delay: null) {
  $declarations: (property, $properties),
                 (duration, $durations),
                 (timing-function, $timing-function),
                 (delay, $delay);
  
  @each $declaration in $declarations {
    @if nth($declaration, 2) {
      $output: ();
        @each $val in nth($declaration, 2) {
          $output: append($output, $val, comma);
        }
      @each $prefix in '-webkit-', '-moz-', '-ms-', '-o-', '' {
        #{$prefix}transition-#{nth($declaration, 1)}: $output;
      }
    }
  } 
}

Он похож на миксин @LeBen, но вы можете использовать include с аргументами, разделенными запятыми, без кавычек:

@include transition(background-color margin, 0.2s 0.3s);

Сокращенная форма

@mixin transition($declarations...) {
  @each $prefix in '-webkit-', '-moz-', '-ms-', '-o-', '' {
    #{$prefix}transition: $declarations;
  }
}

Вот способ реализовать это в вашем коде

@include transition(background-color 0.2s, margin 0.3s);

И теперь, чтобы решить вашу проблему с "разными вызовами", на мой взгляд, единственный способ справиться с ними - это использовать append() функция списка.

Давайте рассмотрим пример. Я собираюсь использовать сокращенную форму миксина, потому что ее проще реализовать.

Представьте, что у вас есть четыре страницы, три части (_variables.scss, _page1.scss, _page2.scss, _page3.scss) и файл style.scss, который импортирует другую:

_VARIABLES.SCSS

// Here comes the variable declaration
$transition-list: color 1s;

_PAGE1.SCSS

// Using append($list, $val, $separator:auto) list function
// we can add some items to $transition-list
$transition-list: append($transition-list, margin 2s, comma);

_PAGE2.SCSS

// You can add also the output of a function
@function example(){
  @return unquote("background-color 1s")
}

$transition-list: append($transition-list, example(), comma);

STYLE.SCSS

// You can add new values into the same page
$transition-list: append($transition-list, padding 4s, comma);

$transition-list: append($transition-list, border 10s, comma);

// And finally you only need to use the include to generate the final transition
example {
  @include transition($transition-list);
}

Как я уже сказал ранее, Я не рекомендую использовать этот метод , это плохая практика.

3
Community 20 Июн 2020 в 09:12

Ваш миксин слишком жесткий и не похож на естественный CSS. Лично я рекомендую использовать миксины, предоставляемые Compass, тем более что он должен обрабатывать также префиксные значения. Если вам просто нужен простой миксин, вы хотите использовать переменные аргументы, например:

@mixin transition($values...) {
    -webkit-transition: $values;
    // other prefixes
    transition: $values;
}

@mixin transition-property($values...) {
    -webkit-transition-property: $values;
    // other prefixes
    transition-property: $values;
}
@mixin transition-delay($values...) {
    -webkit-transition-delay: $values;
    // other prefixes
    transition-delay: $values;
}

// etc

.foo {
    @include transition(background-color, margin); // or transition-property
    @include transition-delay(0.2s);
}

Выход:

.foo {
  -webkit-transition: background-color, margin;
  transition: background-color, margin;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

Альтернативное использование:

.foo {
    @include transition(background-color 0.2s, margin 0.3s);
}

Выход:

.foo {
  -webkit-transition: background-color 0.2s, margin 0.3s;
  transition: background-color 0.2s, margin 0.3s;
}
3
cimmanon 22 Апр 2014 в 01:25

Вот миксин, который вы можете использовать:

@mixin transition($properties, $durations, $timing-function: null, $delay: null) {
  $props: unquote($properties);
  $durs: unquote($durations);

  -webkit-transition-property: $props;
     -moz-transition-property: $props;
      -ms-transition-property: $props;
       -o-transition-property: $props;
          transition-property: $props;

  -webkit-transition-duration: $durs;
     -moz-transition-duration: $durs;
      -ms-transition-duration: $durs;
       -o-transition-duration: $durs;
          transition-duration: $durs;

  @if ($timing-function) {
    -webkit-transition-timing-function: $timing-function;
       -moz-transition-timing-function: $timing-function;
        -ms-transition-timing-function: $timing-function;
         -o-transition-timing-function: $timing-function;
            transition-timing-function: $timing-function;
  }

  @if ($delay) {
    -webkit-transition-delay: $delay;
       -moz-transition-delay: $delay;
        -ms-transition-delay: $delay;
         -o-transition-delay: $delay;
            transition-delay: $delay;
  }
}

При следующем звонке

@include transition("background-color, margin", 0.2s);
0
LeBen 21 Апр 2014 в 17:50