css - SASS SCSS函数生成具有动态路径的类

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

}