Question

I am learning Sass but a bit stuck trying to work something out. I’d like to have a unique background image and header image on different pages. How can I perhaps extract the body class name form the markup and interpret that in scss?

Essentially I require some way to prevent having to do this (which is totally the point of scss right?!)

body.page1 {
  background: url(../img/bkg-page1.png) left top repeat-x;

  header {
    background: url(../img/header-page1.png) center top no-repeat;
    height: 320px; 
  }

}

body.page2 {
  background: url(../img/bkg-page2.png) left top repeat-x;

  header {
    background: url(../img/header-page2.png) center top no-repeat;
    height: 320px; 
  }

}

I realise using variables is the right direction, but not sure how to relay the markup class to the scss.

Any pointers would be most appreciated.

Answer 1

What you’re looking for is an @each loop:

@each $class in (page1, page2, page3) {
    body.#{$class} {
        background: url(../img/bkg-#{$class}.png) left top repeat-x;

        header {
            background: url(../img/header-#{$class}.png) center top no-repeat;
            height: 320px; 
        }
    }
}

This assumes that the class name corresponds to the image name, as indicated in your sample.

body.page1 {
  background: url(../img/bkg-page1.png) left top repeat-x;
}

body.page1 header {
  background: url(../img/header-page1.png) center top no-repeat;
  height: 320px;
}

body.page2 {
  background: url(../img/bkg-page2.png) left top repeat-x;
}

body.page2 header {
  background: url(../img/header-page2.png) center top no-repeat;
  height: 320px;
}

body.page3 {
  background: url(../img/bkg-page3.png) left top repeat-x;
}

body.page3 header {
  background: url(../img/header-page3.png) center top no-repeat;
  height: 320px;
}

You could use a @for loop instead (which eliminates the need for the list of class names) if your class names are always going to have numbers at the end of their name.