Skip to content

Instantly share code, notes, and snippets.

@acdlite
Created November 4, 2013 06:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save acdlite/7298865 to your computer and use it in GitHub Desktop.
Save acdlite/7298865 to your computer and use it in GitHub Desktop.
Experiment using Sass maps to organize Susy Next configuration. Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
$grid: (
small: 90% 8 1/4,
medium: 80% 8 1/4,
large: 80% 12 1/4,
);
$content-grid: (
left: 100% (4 8) 1/4,
right: 100% (8 4) 1/4
);
@function _grid($map, $g, $attr: false) {
$list: map-get($map, $g);
@if $attr == container-width { @return nth($list, 1) }
@if $attr == columns { @return nth($list, 2) }
@if $attr == gutters { @return nth($list, 3) }
@if $attr == total-columns {
$columns: nth($list, 2);
@if type-of($columns) != list { @return $columns }
$sum: 0;
@each $n in $columns {
$sum: $sum + $n;
}
@return $sum;
}
@return $list;
}
@function grid($g, $attr: false) {
@return _grid($grid, $g, $attr);
}
@function content-grid($g, $attr: false) {
@return _grid($content-grid, $g, $attr);
}
output {
a: length(map-get($grid, small));
b: grid(small);
c: grid(small, container-width);
d: content-grid(left, gutters);
e: grid(medium, columns);
f: grid(medium, total-columns);
g: content-grid(left, total-columns);
}
output {
a: 3;
b: 90% 8 1/4;
c: 90%;
d: 1/4;
e: 8;
f: 8;
g: 12;
}
@mirisuzanne
Copy link

To clarify: set-grid() and susy-set() accept both maps and shorthand syntax.

@mirisuzanne
Copy link

I just added the option to mix maps and keyword shorthand lists. It only required a few lines of code. :)

@acdlite
Copy link
Author

acdlite commented Nov 4, 2013

Wow, that's really cool!

I like the idea of putting grids into a map rather than using a variable for each grid because it provides something like a namespace. I've been doing this to organize other types of data, too, like colors and font-sizes. (When I say "I've been doing this," I mean in the few days since I started playing with Sass 3.3, haha.) Plus, with maps, you can do things like iteration that aren't possible with normal variables, even if they are semantically named.

I'm not not sure if this is something that should be part of Susy or if it's best left up to each person's individual preferences, but here's how it might work:

$_grids: ();

@mixin add-grid($g, $name) {
  $_grids: map-merge($_grids, ($name: $g));
}

@function grid($name) {
  @return map-get($_grids, $name);
}

$grid-1: 90%  8 1/4;
$grid-2: 100% (4 8) 1/4;

@include add-grid($grid-1, 1); // Add grid-1

a { output: grid(1) }
b { output: grid(2) } // Will output nothing since it hasn't been added yet

@include add-grid($grid-2, 2); // Add grid-2

c { output: grid(2) } // Now it is output

Essentially, this is just abstracting calls to map-get() and map-merge() to make the syntax more friendly.

@acdlite
Copy link
Author

acdlite commented Nov 4, 2013

I went ahead and created another Gist for the above: https://gist.github.com/acdlite/7308879

@acdlite
Copy link
Author

acdlite commented Nov 4, 2013

So if Susy used this pattern, my example grid() function above would correspond to susy-get().

Question: does susy-get() return the total number of columns in a grid? Not sure the best way to phrase this, but for instance, a grid with columns: (4 8) has a total of 12 columns. I think that would be a useful feature.

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