SASS SCSS 函数生成具有动态路径的类答案

【问题标题】：SASS SCSS function to generate classes with dynamic pathSASS SCSS 函数生成具有动态路径的类
【发布时间】：2017-11-30 12:09:58
【问题描述】：

我有一大组图像，每一个都有 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');} }"
}

但我想这不是这样做的方法。有什么帮助吗？谢谢

【问题讨论】：

试试这样：.sv-category-image { background-image: url('/somepath/#{$categoryName}/#{$categoryName}-small.jpg'); } 这应该可以工作。

标签： css function sass frontend

【解决方案1】：

您可以使用 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'); }
  }

}

【讨论】：