SCSS转换属性覆盖

Question

我使用@mixin为元素添加不同的转换属性。假设我的.scs:中有这个

@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

SASS中没有连接属性的方法，我也不知道是否存在CSS外部工具来完成这项任务。Sass的创建是为了提高CSS功能，不允许程序员开发糟糕的编程实践。我真的不知道创建多个CSS声明语句的目的，因为你可以把它们都放在一个语句中。将所有转换都放在一个语句中，可以大大改进您的结构、工作流程和Sass代码的性能。

好吧，也就是说，正如你之前提到的那样"就让那可怕的杂烩吧

这里有两个不同的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);

现在，为了解决你的问题；不同的呼叫"；在我看来，处理它们的唯一方法是使用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);

风格。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 2

您的mixin过于死板，感觉不像是自然的CSS。就我个人而言，我建议使用Compass提供的mixin，特别是因为它也应该处理带前缀的值。如果你只想要一个简单的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 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);