Convert Sass/CSS to use new Drupal coding standards [#1932748]

Drupal has new CSS coding standards. http://drupal.org/node/1886770

Zen should follow them.

We're pretty close already, but we need to go through our Sass files and tweak.

How do you deal with mixins/extends? I think most of those fall into the "important property to understand the ruleset". Which means they should appear first. @extend first (since the extended ruleset is most likely before the current ruleset) and then @include mixins.

Our generated CSS may need to slightly break Drupal's coding standards since we have no control over what order mixins add declarations to a ruleset.

Comments

Comment #1

zach harkey commented 13 March 2013 at 19:50

I've been experimenting with Zurb Foundation. The new Foundation 4 is completely rewritten and the way they structured it is quite interesting.

In particular, check out the components.

All styles lives inside @mixins which gives the themer/designer the ability to build the css with the default predefined classes, or use the mixins to attach the styles to custom classes as needed. In fact, every component can be used in one of two ways:

1. Build With Predefined HTML Classes
2. Build with our Mixins

For example, take a look at the documentation for the Side Nav component.

Then take a look at the Side Nav component code on Github.

(Interestingly, I don't think they use @extend at all. Or if they do, I can't seem to find it.)

I really like this structure — how the designer can easily toggle styles off and on with a single SASS variable or surpress the defaults altogether and still leverage the component by mixing it into their own selectors.