DEV Community

Discussion on: SCSS FTW on my latest bug

Collapse
 
sno2 profile image
Carter Snook • Edited

Pretty nice! You could, however, use a mixin (basically a function but for returning css markup) if you want to reuse this code with out code dupe with the following:

@mixin tablet {
  @media screen and (max-width: 767px) {
    @content; // the scss that is passed into the mixin body
  }
}

.hero {
  /* other styles */
  .container {
   @include tablet {
      width: 100%;
    }
  }

  .another-container {
    @include tablet {
      margin: 2rem;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

The code would then generate the following css:

.hero {
  /* other styles */
}
@media screen and (max-width: 767px) {
  .hero .container {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .hero .another-container {
    margin: 2rem;
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
emmile_e profile image
Emmilie Estabillo

Great tip! 👍🏼 I did use mixins for the breakpoints, but this was one-off just for that instance so I felt it was fine doing it the long way. The mixin will be handy for maintenance though 🙂