Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created May 8, 2012 23:49
Show Gist options
  • Save mirisuzanne/2640483 to your computer and use it in GitHub Desktop.
Save mirisuzanne/2640483 to your computer and use it in GitHub Desktop.
New names for the Susy +columns() mixin
// This must be an old conflict, but I never noticed it until today:
//
// w3c : http://www.w3.org/TR/css3-multicol/#columns0
// Compass : http://compass-style.org/reference/compass/css3/columns/
// Susy : https://github.com/ericam/susy/blob/master/REFERENCE.mkdn#mixins
//
// In the w3c spec, 'columns: $number' can be used to split content into a $number of columns.
// Compass has a CSS3 'columns()' mixin, that works with the w3c spec.
// In Susy, we have a competing 'columns()' mixin that _spans_ columns rather than _splitting_ them.
//
// Time for an API name change!
//
// Between these three, I lean strongly towards the clarity of #3.
// But you might have even more ideas...?
/* 1. short */
@include cols(2);
/* 2. name-spaced */
@include susy-columns(2);
/* 3. clarified (by Chris Eppstein) */
@include span-columns(2);
@mirisuzanne
Copy link
Author

@memetical You can either upgrade to 1.0.alpha.1 (check the changelog for upgrade instructions), or you can use the long-form properties as listed here: http://compass-style.org/reference/compass/css3/columns/ (column-count, column-gap, etc).

@pdewouters You're not thinking this through clearly. Nouns are more appropriate to variables. For most clarity we should use an active but incomplete sentence:

@include please-adjust-the-susy-grid-span-columns-count-of-this-element-to();
@include thank-you-kindly();

The latter doesn't do anything, but is necessary for proper manners.

@jamiehodge
Copy link

jamiehodge commented May 10, 2012 via email

@pdewouters
Copy link

@ericam thanks, didn't realize that!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment