Rachel Nabors

@dpashkevich Right. @extend lets you extend selectors; @mixin is a rules factory.

@dpashkevich I beg to differ. I use an extend class for that. Keep selectors short and DRY.

%clearfix { zoom: 1; /*or whatevs*/ }

.container { @extend %clearfix; }

Just works out better for me in the large codebases I've worked on. But that's me.

@pe1999 Exactomundo!

@pe1999 Exactomundo!

This is how I usually end up structuring my larger projects: general to specific. I recently tried to split things up by color, typography, etc for a smaller project. It's untenable in the long term. We don't edit "just the colors" or "just the typography" when we're doing maintenance or feature-adds. We're "changing this component" or "adding a new component." When one thing is spread over multiple locations, you play hide and see with your declarations.

I usually end up splitting my sass into the following:

-variables and defaults (everything from colors and font families to grids and resets, not in that order)

-core (good defaults the the bulk of the project will use over and over)

-components (modular bits and bobs that go everywhere but are their own ecosystem of style)

-page specific (overrides on a per-page or other grouping mechanism basis)

@timpietrusky Yeah, it's totally in the "It works on recent versions of all the browsers, so ship it!" zone ;)

Psst, it should be -webkit-transform: rotate(20deg); not webkit-transform: rotate(20deg);