In the mix(in)

SCSS mixins for love and prosperity

Laura Turk
Jul 20, 2017 · 4 min read

This is not a tutorial. You want a tutorial? Look here, here, here or here, but not until you read this.

Imagine a bachelor style confessional, “Oh mer gaw, I just love him so much! I think I’m in love. I should probably tell him I’m in love”. Cut to Mr. Front-End-Developing looking dapper in a suit of JavaScript, making heavy moves with his slick frameworks and libraries, but when the L-word gets thrown around he friend zones me hard with a case of the CSS.

I’m the girl in the middle. Also, why does this exist on television and why can’t I turn away? I digress.

So, what am I to do? Jump into an open source project and grab a CSS issue to solve, of course! Maybe seeing someone else’s process will help give me ideas. Definitely, a quick win will give me the confidence to conquer the CSS world. Probably, but almost certainly, I will solve this issue and in turn solve all my CSS issues now and forever. Also, look at this issue: Low hanging fruit.


Easy Peesy, I sing to myself as I open dev tools to find what slice of padding I need to adjust real quick. Oh. Wait. What’s this? Sass, mother f*cker!

Step one: Figure out where that 100px of padding is coming from.

Step two: Find the mixin culprit, change it, break all the things. Cmd Z, Cmd Z, Cmd Z.

Step three: Become one with the mixin


Before this foray into Open Source I had only dipped my baby toe in Sass/SCSS. I’d made a variable here, nested some selectors there, and created an admittedly over-engineered css file-structure using an approximation to BEM’s naming methodology. As a student spinning up frenzied practice apps from scratch by myself or with a few others on a team, all of these pre-processors and methodologies remained nebulous, and honestly, overkill. It wasn’t until I opened this repo and started sorting through real code on a real-sized app that I saw their true power.

But before I’m blowing tops off fire-hydrants, I need to figure out why I can’t change this padding on this issue. The challenge in this small slice of code, and I imagine the reason it was an open issue and not just a quick fix, was an innocuous mixin called panepadding.

@mixin panepadding {
padding-top: 100px;
padding-bottom: 100px;
}

According to the Sass docs, “a mixin lets you make groups of CSS declarations that you want to reuse throughout your site”, so I’m down for passing this mixin around to standardize some padding, but how do we optimize this for responsive design?

My first thought was override the mixin in a media query on the offending element itself.

.producers {
@include producersbg;
@include sidepaddingSm;
@include panepadding;

@media all and (max-width: 640px){
padding-top: 25px;
}
}

It works! But is this the best option? Does it defeat the point of mixins to override them on an individual basis? I started searching the app for all other instances of panepadding; saw throughout the app 100px padding-top was overkill at mobile sizes, and FOR CONSISTENCY’S SAKE, Laura, don’t go willy-nilly changing styles on one-off elements.

Media query IN the mixin to the rescue! Danny Markov likened mixins to a simplified version of a constructor class in programming languages, so by extension a media query makes sense as a method on that class. This functionality alone might be bringing me back from the friend-zone with CSS.

@mixin panepadding {
padding-top: 100px;
padding-bottom: 100px;
@media all and (max-width: 640px) {
padding-top: 25px;
}
}

I can’t wait to get back to my half-Sass-ified personal site to harness more of the power of mixins. CSS, I’m coming for you, and like, whatever, maybe I like like you. Or maybe I’m evolving past you.

An additional note on newbie contributions to an open source project:

It’s delightful.


No really, thanks to the wonderful people at Open Food Network. Everything about changing careers from book-slinger to code-slinger has been intimidating, and nothing more than giving unsolicited ‘help’ to developers on their real-live app. The people at Open Food Network are welcoming and helpful, quick to reply and full of hearts. I learned a new tool for better git management, how to set up a Ruby project and get the right Bundler on my computer (npm4life!), and how to submit a PR that has a fighting chance at review and going to production. This low hanging fruit was a wonderful entrée to contributing to an awesome, mission-driven organization I can get behind.

My fingers are tapping for more. My heart is full. I WILL accept that rose, sir.

What preprocessor or css extension do you use in work and life?

What’s your favorite Sass/SCSS tool or trick?

Any go-to mixins I should know?

Have any open source project suggestions that are good for Jr. Developers?

)

Laura Turk

Written by

front end engineer. aspiring jill of all trades. lover of all things cute and ridiculous. book fiend.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade