How do you guys manage mixins?

[Josh]

Hey all, after converting to sass for the last year, I’ve really started to wonder how I can work smarter. For example, I’ve never used anything like Compass and I’m wondering if I should, which also brings me to wonder how people manage an ever growing list of mixins. My understanding is that you would bring in Compass to Prepos or Codekit and use all of their mixins for stuff, but then you’ve got your own you need to manage.

Each project I’ve added more mixins and what ends up happening is that progressively my newer projects have more than my older projects. So it’s just starting to get sloppy.

Is there a global way to bring in mixins? How do you guys address having multiple sources of mixins?

[shaneisme]

I personally have a “global local” folder I use for various mixins that I simply import into my main file as needed. I keep them organized in a way that makes sense to me.

That way each project that I’m working on locally can tap into them as needed.

I’ve never personally used Compass, so I can’t speak to it.

[__]

I generally try to keep things organized by what they do: e.g., layout, modular components, effects/transitions, and so forth.

I’ve used Compass, but I didn’t like it. I still use some Compass mixins, but I don’t use Compass itself (the framework).

[nixnerd]

I’ve used Compass, but I didn’t like it. I still use some Compass mixins, but I don’t use Compass itself (the framework).

This double goes for me. I use some compass mixins as needed… if they make logical sense to me. However, they have some pretty poor flexbox mixins… so I’ve made my own.

I try to make my mixins as GENERIC as humanly possible. That way, I can re-use them because they’re not project specific for the most part.

I then keep them in a master file that allows me to import them as a partial.

I even have a base .scss file (skeleton) that imports them for me… along with some compass mixins and normalize.css.

[mcjohnst]

@import "mixins"; // bits, funcs, whatevs

Pretty much the only things that live in there are my breakpoint and animation mixins. The breakpoint being a slightly modified version of the ones that come with Gumby and the anim one is a roll-yer-own.

If I find myself using a particular tedious bit over, over, and over again on a project I might make a mixin or, more likely, a placeholder and drop it in there.

[Alen]

Is there a global way to bring in mixins? How do you guys address having multiple sources of mixins?

I only have one file for my mixins, and I import it as a partial. My folder structure looks like this.

base/ – Folder containing base HTML tags, like li, body, table
layout/ – Folder containing major layout sections, like header, footer, as well as grid
modules/ – Folder containing reusable components or modules, for example WordPress widgets
pages/ – Folder containing page specific stylistic changes
_mixins.scss – This is mixin as partial.
_normalize.scss – Normalize.css by Nicolas Gallagher as partial
master.scss – Master compile file.

Within each folder you can abstract the code as much as you like, using my folder structure example, you might have separate files for body or li tags.

base/
base/_body.scss
base/_links.scss
base/_forms.scss
base/_base.scss

_base.scss file would compile all other partials, then you just need to import it (this one single file) into your master file.

I haven’t used Compass. I have Gulp configured, although I am experiencing some issues with installing node modules on my Windows 7 machine, so I had to temporarily switch to using command line sass to compile.

sass --watch master.scss:master.min.css --style compressed

[Josh]

Thanks for all the feedback so far!

If you’re using mamp for example, I’m assuming your doing something like:

@import "http://localhost/css/master.scss"

and then just building that file up, correct?

[Author]

Posts