Question

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

但我猜这不是那样做的方法。任何帮助？感谢

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

}

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

1 个答案: