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);
@micahgodbolt
Copy link

3 makes the most sense to me too.

@tylerlee
Copy link

tylerlee commented May 9, 2012

agreed on 3.

@scottkellum
Copy link

Why not all of the above? +1 for shorthand.

You can easily have many mixins do the same thing

// New
@mixin span-columns($vars) {
  // logic
}

// Classic
@mixin columns($vars) {
  @include span-columns($vars);
  @warn 'This will be depreciated in ... pls use span-columns instead.'
}

// shorthand
@mixin cols($vars) {
  @include cols($vars);
}

@pdewouters
Copy link

I like the namespaced idea

@nathos
Copy link

nathos commented May 9, 2012

Liking option 3

@dannyprose
Copy link

+1 for 3.

But @scottkellum's suggestion method is interesting.

@mirisuzanne
Copy link
Author

We can have many mixins do the same thing, but I'm not sure it's a good idea. Users can write any synonyms & shortcuts that they find useful, but my job isn't to give them a personalized coding experience. My job is to give them a modular set of tools with a shared language. I want to add meaning to your code, but synonyms add complexity, remove clarity, and don't bring any new features. That's a clear negative to me.

Name-spacing seems odd unless we do it to all the mixins, and that sounds tedious.

@jamiehodge
Copy link

+1 #3 for being the most semantic. Much as I like susy, I don't want to have to type its name hundreds of times a day.

@Anahkiasen
Copy link

I like span-columns but... It's just... I really hate when there is a - in the middle of a mixin name, I just always feel it makes it more tedious to type and for a mixin that will be used a lot in Susy, there has to be a better way.

@mirisuzanne
Copy link
Author

I'm open to more suggestions. Here's one:

@include element();

Feels a bit vague. Kinda like just saying 'item', it doesn't mean much. It's a move towards naming the object rather than the action. Not sure which is better. Still open to suggestions for a few more hours at least. I'd like to get an update out tonight.

@silvenon
Copy link

silvenon commented May 9, 2012

How about this one?

@include grid();

There's no ambiguity because it describes exactly what it's part of.

@silvenon
Copy link

silvenon commented May 9, 2012

Or maybe:

@include span();

@pdewouters
Copy link

how about: colspan();
just like HTML table syntax

@mirisuzanne
Copy link
Author

Oh, I like colspan. Just trying to think if that opens us up to any more conflicts like the one we're trying to resolve...

@micahgodbolt
Copy link

colspan() is cool too. grid() or span() just don't have enough context.

@silvenon
Copy link

silvenon commented May 9, 2012

The reason why I'm against colspan is because the naming convention of Compass mixins is that they (as far as I recall) always have full words in their name, even if they're long (e.g. apply-side-rhythm-borders). I suggest then sticking with #3 and optionally having #1 as a shortcut.

@mirisuzanne
Copy link
Author

I agree, and I've been moving the rest of Susy towards that convention.

Thanks for all the thoughts! Many good ideas, but at this point (weighing clarity over brevity) I'm moving forward with span-columns. That doesn't even compare to the length or number of -'s already in Compass and CSS. I use auto-complete in my text-editor to help with that sort of problem. Keep languages cleaner by keeping shortcuts in the text-editor.

@pdewouters
Copy link

so how about

 susy-grid-span-columns-count()
:)

@memetical
Copy link

just ran into this exact conflict when attempting to use compass columns mixin in conjunction with my susy grid layout.
What would be the best way to resolve this issue for my current project until this is fixed?
Anyone care to help a bloody compass beginner?

@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