CSS - SASS：使用基于@each的mixins来生成多个背景 [英] CSS - SASS: Using @each based mixins to generate multiple backgrounds

问题描述

我使用CSS来创建发型和颜色的目录。我有55种不同的颜色和发型的组合。每个发型和颜色都有自己的图像SVG文件，我需要将它们组合成一个背景（使用CSS3的多个背景功能）。

此混合生成多个背景：（它是基于mixin 在此帖子）

  @mixin style-matrix（$ colors，$ styles）{
 @each $ s in $ styles {
 @each $ c in $ colors {
 
 
 url（pps＃{$ s}＃{$ c} .svg），
} 
} 
} 
 
 
 
 $ colors：blonde，red，dkbrown，ltbrown，black; 
 $ styles：hairboy1，hairboy2，hairboy3，hairboy4，hairboy5，hairgirl6，hairgirl1，hairgirl4，hairgirl2，hairgirl3，hairgirl5; 
 
 .hidden {
 background：@include style-matrix（$ colors，$ styles）url（base.svg）; 
} 
  

（请参阅 codepen here）

但是，每次运行mixin时，我都会收到此错误消息：

 ... url后面的CSS无效：expected{，was（pps＃{$ s}＃{$ c} ...
  
 
 
 
如何使用mixin生成多个背景？
解决方案
 Mixins返回属性/值对。如果只需要该值，则需要一个函数，如下所示：
  @function style-matrix（$ colors，$ styles）{
 $ bg：compact（）; 
 @each $ s in $ styles {
 @each $ c in $ colors {
 $ bg：join（$ bg，url（pps＃{$ s}＃{$ c} .svg），comma）; 
} 
} 
 @return $ bg; 
} 
 
 .hidden {
 background：style-matrix（$ colors，$ styles），url（base.svg）; 
} 
  
 
I am using CSS to create a catalog of hairstyles and colours. I have a combination of 55 different colours and hair styles. Each hair style and colour has its own image SVG file and I need to combine them all into a single background (Using the multiple background feature of CSS3).

I have written this mixing to generate the multiple backgrounds: (It is based on the mixin in this post)
@mixin style-matrix($colors, $styles) {
    @each $s in $styles {
        @each $c in $colors {


                url("pps#{$s}#{$c}.svg"),
        }
    }
}



$colors: blonde, red, dkbrown, ltbrown, black;
$styles: hairboy1, hairboy2, hairboy3, hairboy4, hairboy5, hairgirl6, hairgirl1, hairgirl4, hairgirl2, hairgirl3, hairgirl5;

.hidden {
background: @include style-matrix($colors, $styles) url("base.svg);
}
(see codepen here)

However, every time I run the mixin, I get this error message:
Invalid CSS after "...            url": expected "{", was "("pps#{$s}#{$c}..."
How can I use the mixin to generate the multiple backgrounds? 
解决方案
Mixins return property/value pairs. If you want the value only, you need a function. It looks like this:
@function style-matrix($colors, $styles) {
  $bg: compact();
  @each $s in $styles {
    @each $c in $colors {
      $bg: join($bg, url("pps#{$s}#{$c}.svg"), comma);
    }
  }
  @return $bg;
}

.hidden {
  background: style-matrix($colors, $styles), url("base.svg");
}


                        
这篇关于CSS  -  SASS：使用基于@each的mixins来生成多个背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！