5 comments

  • Hamish TaplinHamish Taplin, 7 years ago

    This seems like quite a lot of extra work to solve a problem that doesn't really exist tbh. Being able to just put a media query inside a selector is one of the convenient things about Sass and this breaks that.

    3 points
    • Dom BriggsDom Briggs, 7 years ago

      True my preferred solution would be to keep things nested but I didn't like the duplication. You can argue it doesn't really matter for most devices for performance or file size but if I can save a few kb's I'm happy to.

      Although I found being able to jump into a component file scroll to the bottom and know exactly which classes were responsive speeded up my workflow when making changes.

      0 points
  • Alec LomasAlec Lomas, 7 years ago (edited 7 years ago )

    This is a clever solution, but it seems like it would make maintainability a bit of a chore (now I have my styles in two locations, even if one is just a call).

    Of course, there is a post-processor option, such as gulp-merge-media-queries. It's not the most optimal solution. What would be cool is an engine that recursively goes through every @media call before generating markup. It would probably be slow as hell, but then you could (ideally) update variable values based on @media rules.

    1 point
    • Dom BriggsDom Briggs, 7 years ago

      Awesome thanks, I did not know about this! I'll include in an edit in the post :) Thanks!

      0 points
  • Dom BriggsDom Briggs, 7 years ago

    I just added an update describing the benefits of the approach on workflow. I realised this was actually the real benefit for my team using this approach not just the removal of duplicated media queries. https://medium.com/@hallodom/the-solution-to-media-queries-in-sass-5493ebe16844#.5wquz66sn

    Thanks for reading!

    0 points