SASS使用变量列表来填充混合中的参数

我在本地为项目特定的线性渐变创建混合。这个想法是，我有6个不同的梯度方案正在进行。我试图从一个变量传递参数的所有值。不知道我是否超越了SASS现在支持的范围。此外，所有3个文件都在单独的文件中，这些文件被导入到主站点scss文件中。SASS使用变量列表来填充混合中的参数

任何指导将不胜感激。

$gradientBlue: #68bafa, #279bf2, #2891e2; 

@mixin verticalGradient($color-1, $color-2, $color-3: "", $color-4: "", $color-5: "") { 
    background: $color-1; 
    @include pie; 
    @include filter-gradient($color-1, $color-2); 
    @include background-image(linear-gradient(top, $color-1 0%, $color-2 100%)); 
    @if #{$color-3} != none { 
    text-shadow: 1px 1px 1px #{$color-3}; 
    } 
    @if #{$color-4} != none { 
    &:hover { 
     @include pie; 
     background: $color-4; 
     text-shadow: 1px 1px 1px $color-5; 
    } 
    } 
} 

@include verticalGradient($gradientBlue);

来源

2013-04-16 Keith

此外，阅读有关[插补]（http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_）。你有点疯了，我无法想象一个你想用'@ if'指令的地方。更多的是选择器和属性名称。 – bookcasey

您可能需要考虑将纯色背景色设置为'mix（$ color-1，$ color-2）'。在我自己的工作中，我发现它看起来更像一个倒退，而不是用任何一种停止颜色。另一方面，你可能会发现第二站比第一站更合适的背景色。 – cimmanon

当然。尝试是这样的：

$gradientBlue: #68bafa, #279bf2, #2891e2; 

@mixin vertical-gradient($colors) {  
    @include background(linear-gradient(nth($colors, 1), nth($colors, 2))); 
    @if length($colors) >= 3 { 
    text-shadow: 1px 1px 1px nth($colors, 3); 
    } 
    @if length($colors) >= 4 { 
    background: nth($colors, 4); 
    } 
} 

body { 
    @include vertical-gradient($gradientBlue); 
}

来源

2013-04-16 23:54:11 bookcasey

如果您打算为OP的mixin进行直译，则背景颜色设置为第一种颜色。悬停的背景是第四种颜色。 – cimmanon

我只是想要一个简单的概念例子，如果你想编辑它，所以他可以复制和粘贴，感觉自由。 :-) – bookcasey

我不知道有关nth（）选项。点，并非常感谢你，ser。 – Keith

我也有类似的问题，我写的应该指定的参数列表罗盘混入的混入。这里是我的解决方案（与罗盘0.12.2）：

@mixin single-box-shadow-fallback($color, $arg...) { 
    @include single-box-shadow($color, $arg...); 
    .lt-ie9 & { 
     border: 1px solid $color; 
    } 
    } 
}

呼叫

@include single-box-shadow-fallback(#CCC, 0, 0, 2px, 0, true);

这些示例输出wront CSS;

@mixin single-box-shadow-fallback($color, $arg) { 
    @include single-box-shadow($color, $arg); 
}

输出：

box-shadow: 0, 0, 2px, 0, true 0px 5px #cccccc;

来源

2014-01-31 13:28:24 stephanfriedrich

SASS使用变量列表来填充混合中的参数

回答

相关问题