One I mastered using Sass enough to feel confident with basic mixins, I decided to remove my
_media.scss
file and go at it with Chris Coyer’s methodology of Breakpoints.
Instead of having a media file with all the special media calls, you can put the media section inside the Sass call. That stops that cognitive dissonance (for me at least) of hunting down where the heck I made that change. Since I was already using Tracy’s code, I was able to slip in breakpoints using her bp mixin, with a name. And thus:
.site-intro { @include font-size(14px); line-height: 1.5; @include rem(letter-spacing, 1px); text-transform: uppercase; float: left; @include rem(margin-top, 20px); @include bp(small) { @include rem(margin-bottom, 15px); width: 100%; text-align: center;} }
This is clearly a really simple example, but it means I can add all sorts of blocks and have it be together. It actually made my building of my css
files really easy, since once I figured out what size I wanted things to be, I was able to build and ignore all the tricky maths, which as I learned recently, was really important for your REMs.
Now that I was using includes, mixins, default settings, and breakins, it was time to reconsider how I made the css files. I installed sass on my laptops and servers. It required Ruby, but I’d installed that ages back trying out Jekyll (there’s no post about that yet for … reasons). Once Ruby was installed, Sass was this easy: gem install sass
(you may or may not need to sudo that sandwich).
Having Sass on my server means I can edit files in place (which … you wouldn’t do, right?) and when I’m done, run this:
$ sass sass/style.scss style.css
But it also means when I (properly) edit on my computer and push up, I can script with git hooks instead! I took my methodology from Nico Hagenburger and Steve Grunwell, but you can use just about anything. I like how they don’t include the complied css file in their builds, which keeps it cleaner. Then one could have another hook to push the files after, say, you tag a release. That one would copy the files up to your server (rsync anyone?) and thus you do it all locally, but magically it appears to the world.

Back to breakpoints though. So great, I can use it to make my math teh simples. What else can I do? I can change content, colors, font-families, or anything else you want to change on a size-defined basis. How do you break the points? Breakpoint SASS is possibly my new favorite website.
For an end user who doesn’t really spend a lot of time with theme development, this buys even me a little time in my day. After I spent a weekend banging it out, I found my updates were easier, cleaner, and faster. Having the files separate is possibly the fastest thing. I edit a scss, check in the code to my git repo (because I am totally neurotic), test the compiled css, and I’m dancing in the streets.
Comments
2 responses to “Electric Sass Boogaloo”
I’ve been reluctant to mix my breakpoints in with my other css, but I see how this can be useful. I just finished reading Sass for Web Designers by Dan Cederholm and he does that too.
I guess I’m stuck in my old ways. I think I may rectify that right now. Thanks for the push. π
@christine: You know how hard a sell I am on anything that makes me re-learn what I know π
The mixins for media sizes made my day and helped me debug a massive ish I’d been having for that site.