一个SASS可以@mixin接受的参数未定义的号码？ [英] Can a sass @mixin accept an undefined number of arguments?

问题描述

我试图创造一个过渡SASS混入。这是我到目前为止所。

  @mixin过渡（$ VAR）
  -webkit-过渡：$ VAR
  过渡：$ VAR
 

我希望能够通过像这样多个参数

  @include过渡（颜色.5s线性，宽.5s线性）
 

不幸的是，我得到以下错误

 语法错误：混入过渡需要1个说法，但被传递2。
 

有没有办法做到这一点，因此产生在CSS下面的输出，同时还接受参数未定义多少？

  -webkit-过渡：色.5s线性，宽.5s线性的;
过渡：颜色.5s线性，宽.5s线性的;
 

解决方案

变参数

有时是有意义的一个mixin采取未知数量的参数。例如，用于创建箱阴影一个mixin可以采取任何数量的阴影作为参数。对于这些情况，萨斯支持可变参数，这是在一个混合声明，采取一切剩参数并将其打包成一个列表的末尾论点。这些论点看起来就像正常的争论，但随后 ... 。例如：

@mixin的box-shadow（$阴影...）{
  -moz-箱阴影：$阴影;
  -webkit-箱阴影：$阴影;
  箱阴影：$阴影;
}.shadows {
  @include的box-shadow（0像素4PX为5px＃666，2px的6个像素10px的＃999）;
}


被编译成：

.shadows {
  -moz-的box-shadow：0像素4PX为5px＃666，2px的6个像素10px的＃999;
  -webkit-的box-shadow：0像素4PX为5px＃666，2px的6个像素10px的＃999;
  的box-shadow：0像素4PX为5px＃666，2px的6个像素10px的＃999;
}


来源： SASS官方文档

所以，你基本上只需要改变你的混入声明如下：

@mixin过渡（$ VAR ...）
  -webkit-过渡：$ VAR
  过渡：$ VAR


I'm trying to create a sass mixin for transitions. This is what I have so far.

@mixin transition($var)
  -webkit-transition: $var
  transition: $var

I want to be able to pass it multiple arguments like this

@include transition(color .5s linear, width .5s linear)

Unfortunately, I get the following error

Syntax error: Mixin transition takes 1 argument but 2 were passed.

Is there a way to do this so it produces the following output in css while still accepting an undefined number of arguments?

-webkit-transition: color .5s linear, width .5s linear;
transition: color .5s linear, width .5s linear;

解决方案

Variable Arguments

Sometimes it makes sense for a mixin to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports "variable arguments," which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments, but are followed by .... For example:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

is compiled to:

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

From : SASS official Documentation

So you basically just need to change your mixins declaration to look like this :

@mixin transition($var...)
  -webkit-transition: $var
  transition: $var

这篇关于一个SASS可以@mixin接受的参数未定义的号码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！