使用scss进行多重转换

我有一个scss @mixin多重转换问题。我试图创建动态转换@mixin与1-5不同的属性。当我处理低于此错误代码显示出来：使用scss进行多重转换

Error: Mixin transition takes 1 argument but 3 were passed. on line 758 of style.scss, in `transition' from line 758 of style.scss Use --trace for backtrace.

这是我的代码：

@mixin：

@mixin transition($x){ 
    transition: $x; 
    -webkit-transition: $x; 
    -moz-transition: $x; 
    -ms-transition: $x; 
    -o-transition: $x; 
}

@include：

@include transition(visibility 0s ease 0.2s, opacity 0.2s ease, transform 0.3s ease);

我想通了这个技巧，但它看起来像一个非常不干净的解决方案对我说：

@include transition(visibility 0s ease 0.2s + "," + opacity 0.2s ease + "," + transform 0.3s ease);

有没有更好的办法做到这一点？

来源

2016-11-11 Zeev Katz

没有逗号，如果没有记错 –

你并不需要供应商前缀'transition'这些天呢。 – 2016-11-11 17:10:44

如果您确实需要前缀，请使用[autoprefixer]（https://github.com/postcss/autoprefixer）这样的主管前缀。 – 2016-11-11 17:21:34

在您的mixin中，您声明了一个变量$x作为参数，这意味着sass期望mixin被一个参数调用。

@include transition(visibility 0s ease 0.2s)

在您通过混入逗号分隔值，它会导致错误，因为青菜看到的，而不是其期望的单个值作为这些多个值。

@include transition(visibility 0s ease 0.2s, opacity 0.2s ease) //Sees two args instead of one arg

在萨斯，逗号分隔如果声明为可变参数值可以被解释为单个值。 可变参数是用3个点声明的混合或函数参数附加到它们的名称。

与$x...更换您的$x参数将确保上海社会科学院解释传递给你的mixin作为一个值逗号分隔的参数。

@mixin transition($x...){ 
    -webkit-transition: $x; 
    -moz-transition: $x; 
    -ms-transition: $x; 
    -o-transition: $x; 
    transition: $x; 
}

然后它可以像这样

div { 
    @include transition(color 1s, background-color 1s, border-color 1s); 
}

其编译成

div { 
    -webkit-transition: color 1s, background-color 1s, border-color 1s; 
    -moz-transition: color 1s, background-color 1s, border-color 1s; 
    -ms-transition: color 1s, background-color 1s, border-color 1s; 
    -o-transition: color 1s, background-color 1s, border-color 1s; 
    transition: color 1s, background-color 1s, border-color 1s; 
}

通过这样做，可以作为你通常会在没有黑客CSS，你是可以传递的价值观目前正在使用它变得更清洁。

希望这有助于

来源

2016-11-11 17:33:18

使用scss进行多重转换

回答

相关问题