CODEWITHSUNDEEP
cssfunctionsassfrontend
pumpkinzzz
pumpkinzzz

Reputation: 2967

SASS SCSS function to generate classes with dynamic path

i have a large set of images, each of 4 sizes format, and i'm going to map them in CSS like this:

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

so i was wondering, is there a way to automatize this in SCSS?

i tried using functions

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

but i guess that's not the way to do that. any help? thanks

Upvotes: 0

Views: 167

Answers (1)

danb
danb

Reputation: 356

You could use a SASS @each directive;

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

}

Upvotes: 2

Related Questions