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:
@mixintablet{@mediascreenand(max-width:767px){@content;// the scss that is passed into the mixin body}}.hero{/* other styles */.container{@includetablet{width:100%;}}.another-container{@includetablet{margin:2rem;}}}
The code would then generate the following css:
.hero{/* other styles */}@mediascreenand(max-width:767px){.hero.container{width:100%;}}@mediascreenand(max-width:767px){.hero.another-container{margin:2rem;}}
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 🙂
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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:
The code would then generate the following css:
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 🙂