用于sass的通用@mixin具有多个不同的值 [英] Generic @mixin for sass with multiple and varied values

问题描述

如何在sass中为逗号，创建多个值的通用@mixin，用户现在可能不知道mixin将包含多少个值？

用户可能想在一些情况下放置一个阴影，在一些不同的CSS样式中可能有5个阴影，并且具有不同的值。

什么是最好的方法，或者我们有选择？

  text-shadow：0 0 5pt白色，
 0 0 6pt白色，
 0 0 7pt白色，
 0 0 8pt白色，
 0 0 9pt白色，
 0 0 10pt白色，
 0 0 11pt白，
 0 0 12pt白，
 0 0 13pt白，
 0 0 14pt白，
 0 0 15pt白，
 0 0 16pt白，
 0 0 17pt white，
 0 0 18pt white，
 0 0 19pt white; 
  

我需要这样的：

  @mixin textShadow（$ h-shadow：$ baseUnit * 0，$ v-shadow：$ baseUnit * 0，$ blur：$ baseUnit * 2，$ color：white）
   
 
解决方案
从官方文档：
 
 
 Sass支持可变参数，它是mixin声明的结尾的参数，它接受所有的剩余参数并将它们打包成一个列表。这些参数看起来像正常的参数，但后面是 ... 。例如：
 
 
 
 
 
  @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）; 
} 
  
 
how do I create a generic @mixin in sass for multiple values with comma , and user might not now know how many values would each include of mixin would have? 

The user might want to place one shadow in some case and may be 5 shadows in some different css style, and with different values.

What is the best approach or do we have choices?.
text-shadow: 0 0 5pt white,
                0 0 6pt white,
                0 0 7pt white,
                0 0 8pt white,
                0 0 9pt white,
                0 0 10pt white,
                0 0 11pt white,
                0 0 12pt white,
                0 0 13pt white,
                0 0 14pt white,
                0 0 15pt white,
                0 0 16pt white,
                0 0 17pt white,
                0 0 18pt white,
                0 0 19pt white;
I need to have something like this:
@mixin textShadow($h-shadow:$baseUnit * 0, $v-shadow:$baseUnit * 0, $blur:$baseUnit * 2, $color:white)

解决方案
From the official documentation:

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


                        
这篇关于用于sass的通用@mixin具有多个不同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！