Variables for color, Functions for em conversion make perfect sense to me and I can see this is a valuable and time saving thing.
I’m having a problem with media queries as mixins. I like having the media queries in one place…rather than nested in each style.
Again I can see a benefit for major breakpoints here…but what about minor breakpoints? I don’t want to give a breakpoint a name if it only serves to move a logo by 10 pixels in-between two major breakpoints.
How is everyone else addressing these minor breakpoints? Does anyone opt for using standard CSS for media queries?
I have a bit of a mix of how I handle it. I am a big fan of [Breakpoint](http://breakpoint-sass.com/), with a few “major” breakpoints, and then I specify the minor ones without using variables but only that one.
I do tend to nest the breakpoints in the elements that they concern, because to me that makes a lot more sense, but it works whether or not I use a mixin or standard CSS.
Do however you feel that your workflow and code is best helped, use as much (or little) of Sass as you’re interested in. I hope this helped, if not feel free to ask for clarifications.
My concern – especially handing over files that there would be nested media queries and standard media queries and that might seem confusing. We do some template handovers for internal development teams you see…
Maybe if I do as you suggest I could have the minor tweaks in standard CSS I could make sure it’s appropriately named as such.
Unfortunately I think the template requirements will be different on a project by project basis so I don’t want the compiled .css file structure to look too weird and hard to navigate for a non sass user that’s all.
yes, if you’re needing to have a readable .css file, you’re probably better off not nesting them. You can use breakpoint in that way, or just use “normal” media queries in separate partials and include them at the bottom of the file.