用于生成具有动态路径的类的SASS SCSS函数

我有一大组图像，每一个都有4种大小的格式，我将用CSS将它们映射如下：

[data-category="football"] {
    .sv-category-image            { background-image: url('/somepath/football/football-small.jpg'); }
    .sv-category-image--medium    { background-image: url('/somepath/football/football-medium.jpg'); }
    .sv-category-image--large     { background-image: url('/somepath/football/football-large.jpg'); }
    .sv-category-image--landscape { background-image: url('/somepath/football/football-landscape.jpg'); }
}
[data-category="basketball"]  {
    .sv-category-image            { background-image: url('/somepath/basketball/basketball-small.jpg'); }
    .sv-category-image--medium    { background-image: url('/somepath/basketball/basketball-medium.jpg'); }
    .sv-category-image--large     { background-image: url('/somepath/basketball/basketball-large.jpg'); }
    .sv-category-image--landscape { background-image: url('/somepath/basketball/basketball-landscape.jpg'); }
}
...

所以我想知道，有没有办法在SCSS中实现自动化

我试着使用函数

@function setCategoryImages($categoryName){
  @return "[data-category="+$categoryName+"] {
        .sv-category-image            { background-image: url('/somepath/"+$categoryName+"/"+$categoryName+"-small.jpg'); }
        .sv-category-image--medium    { background-image: url('/somepath/"+$categoryName+"/"+$categoryName+"-medium.jpg'); }
        .sv-category-image--large     { background-image: url('/somepath/"+$categoryName+"/"+$categoryName+"-large.jpg'); }
        .sv-category-image--landscape { background-image: url('/somepath/"+$categoryName+"/"+$categoryName+"-landscape.jpg');} }"
}

---

但我想这不是办法。有什么帮助吗？谢谢

您可以在每个指令中使用SASS

$sports: basketball, football;

@each $sport in $sports {

  [data-category="#{$sport}"] {
      .sv-category-image            { background-image: url('/somepath/#{$sport}/#{$sport}-small.jpg'); }
      .sv-category-image--medium    { background-image: url('/somepath/#{$sport}/#{$sport}-medium.jpg'); }
      .sv-category-image--large     { background-image: url('/somepath/#{$sport}/#{$sport}-large.jpg'); }
      .sv-category-image--landscape { background-image: url('/somepath/#{$sport}/#{$sport}-landscape.jpg'); }
  }

}

---

您可以使用SASS@each指令

$sports: basketball, football;

@each $sport in $sports {

  [data-category="#{$sport}"] {
      .sv-category-image            { background-image: url('/somepath/#{$sport}/#{$sport}-small.jpg'); }
      .sv-category-image--medium    { background-image: url('/somepath/#{$sport}/#{$sport}-medium.jpg'); }
      .sv-category-image--large     { background-image: url('/somepath/#{$sport}/#{$sport}-large.jpg'); }
      .sv-category-image--landscape { background-image: url('/somepath/#{$sport}/#{$sport}-landscape.jpg'); }
  }

}

---

试着这样做：

.sv category image{background image:url（'/somepath/{$categoryName}/{$categoryName}-small.jpg'）；}

应该可以。试着这样做：

.sv category image{background image:url（'/somepath/{$categoryName}/{$categoryName}-small.jpg'）}

应该可以。