Question

我使用@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只有转换边距，但我也想要背景色转换：有没有简单的方法让它工作？

我有不同的电话

很重要

Answer 1

你的mixin过于僵硬，感觉不像是自然的CSS。就个人而言，我建议使用mixins provided by Compass，特别是因为它也应该处理前缀值。如果你只想要一个简单的mixin，你想使用像这样的变量参数：

@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;
}

Answer 2

在SASS中无法连接属性，我也不知道是否存在CSS外部工具来执行此任务。 Sass的创建是为了提高CSS功能，而不是让程序员开发糟糕的编程实践。当你可以将它们全部保存在一个语句中时，我真的不知道创建多个CSS声明语句的目的。在一个语句中保留所有转换可以显着改善您的结构，工作流程和Sass代码的性能。

好的，那就是说，正如你之前提到过的那样，让可怕的kludge成为＆＃34;

以下是两种不同的mixin，一种用于速记转换声明，另一种用于long形式，它们在处理和加载时间之间的差异可以忽略不计，唯一明显的区别在于代码的样式。

长篇mixin

@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 mixin，但您可以使用包含逗号分隔的参数而不带引号：

@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);

现在，用＃34;不同的电话来解决你的问题＆＃34;在我看来，处理它们的唯一方法是使用append()列表函数。

让我们来看看这个例子。我将使用速记mixin形式，因为它更容易实现。

想象一下，您有四个页面，三个部分（_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);
}

正如我之前所说，我不建议使用此方法，这不是一个好习惯。

Answer 3

以下是您可以使用的mixin：

@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);

SCSS转换属性覆盖

3 个答案: