scss background properties not carrying over in media queries

Question

I'm using Scss and came upon something that puzzles me.

Background properties don't carry over into the media queries so I need to rewrite it all and this just seems very repetitive and not DrY at all.

Maybe I'm missing something or overlooking something here

Let's say I have two divs styled the same but different background images.

Dog
Dog

Now I add my style via SCSS as follow

.section {
  padding: 3rem 2rem;
  background-position: top center;
  background-size:cover;
  background-repeat: no-repeat;

  &--dog {
   background: url(./images/dog.jpg)
  }

  &--cat {
   background: url(./images/cat.jpg)
  }
}

Renders CSS:

.section {
  padding: 3rem 2rem;
  background-position: top center;
  background-size:cover;
  background-repeat: no-repeat;
}

.section--dog {
   background: url(./images/dog.jpg)
 }

 .section--cat {
   background: url(./images/cat.jpg)
 }

The result is that the background properties don't carry over even though it's applied to the same div.

Then I tried the extend the background properties in SCSS:

.section {
  padding: 3rem 2rem;
  background-position: top center;
  background-size:cover;
  background-repeat: no-repeat;
}

.section--dog {
   background: url(../images/dog.jpg);
   @extend .section;
 }

 .section--cat {
   background: url(../images/cat.jpg);
    @extend .section;
 }

Rendered CSS:

.section, .section--dog, .section--cat {
  padding: 3rem 2rem;
  background-position: top center;
  background-size:cover;
  background-repeat: no-repeat;
}

.section--dog {
   background: url(../images/dog.jpg)
 }

 .section--cat {
   background: url(../images/cat.jpg)
 }

The result is that the background properties still don't carry over even though it's applied to each of the specific divs.

I then created a mixin to add in which solved part of the problem, but there was still an issue - The SCSS:

@mixin bg-properties {
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section {
  padding: 3rem 2rem;     
}

.section--dog {
   background: url(../images/dog.jpg);
   @include bg-properties;
 }

 .section--cat {
   background: url(../images/cat.jpg);
    @include bg-properties;
 }

Rendered CSS:

.section {
  padding: 3rem 2rem;
}

.section--dog {
  background: url("../images/dog.jpg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section--cat {
  background: url("../images/cat.jpg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

This works fine until I add in the Media Query to use a different size image. Then the properties don't carry over again.

SCSS:

@mixin bg-properties {
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section {
  padding: 3rem 2rem;
}

.section--dog {
   background: url(../images/mobile/dog.jpg);
   @include bg-properties;

   @media screen and (min-width:768px) {
     background: url(../images/desktop/dog.jpg);
   }
 }

 .section--cat {
   background: url(../images/mobile/cat.jpg);
    @include bg-properties;

   @media screen and (min-width:768px) {
     background: url(../images/desktop/cat.jpg);
   }
 }

Rendered CSS:

.section {
  padding: 3rem 2rem;
}

.section--photography {
  background: url("../images/mobile/cat.jpg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
  .section--photography {
    background: url("../images/desktop/cat.jpg");
  }
}

.section--design {
  background: url("../images/mobile/dog.jpg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
  .section--design {
    background: url("../images/desktop/dog.jpg");
  }
}

So the above works fine for mobile but once you hit the media query it discards the background properties again. the only resolution was to add the mixin inside the media queries as well. All this is fine but doesn't feel very DRY.

Feedback would be greatly appreciated

scss background properties not carrying over in media queries

0 Answers