I don't use preprocessors, but I can explain how I've been writing responsive queries for modules. In the past If I had a website that contained global site styles, plus responsive styles for different modules I might have structured my code like this:
(global styles)
(module A styles)
(module B styles)
(module C styles)
@media tablet {
(global tablet overrides)
(module A tablet)
(module B tablet)
(module C tablet)
}
@media desktop {
(global desktop overrides)
(module A desktop)
(module B desktop)
(module C desktop)
}
Now I've taken to grouping my CSS onto modules, when I'm using @media queries that would look like this:
(global styles)
@media tablet {
(global tablet overrides)
}
@media desktop {
(global desktop overrides)
}
(module A styles)
@media tablet {
(module A tablet)
}
@media desktop {
(module A desktop)
}
(module B styles)
@media tablet {
(module B tablet)
}
@media desktop {
(module B desktop)
}
(module C styles)
@media tablet {
(module C tablet)
}
@media desktop {
(module C desktop)
}
This has been a lot better, I can much more easily copy/paste sections - and it turns out not every module needs to have every breakpoint - so I just include the breakpoints that make sense depending on the design.
For the past couple of years I've been experimenting with element queries as well (@element) which are like @media queries but working at the element level instead. Using the formatting above make it really simple to think about your styles if they were element queries. Media styles for the global site layout, but then element queries for each module's repsonsiveness:
(global styles)
@media tablet {
(global tablet overrides)
}
@media desktop {
(global desktop overrides)
}
(module A styles)
@element narrow {
(module A narrow)
}
@element wide {
(module A wide)
}
(module B styles)
@element narrow {
(module B narrow)
}
@element wide {
(module B wide)
}
(module C styles)
@element narrow {
(module C narrow)
}
@element wide {
(module C wide)
}
And if the responsive styles relate only to the element's own dimensions, it's even easier to copy/paste styles from one layout to another, or one project to another - knowing that whatever layout you put that module into it will display correctly.