css - SCSS 过渡属性覆盖

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

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 和不带引号的逗号分隔参数:

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

正如我之前所说，我不推荐使用这种方法，这不是一个好的做法。