Neatly Organized Layouts with Sass Maps and Susy

Sometimes, there is a need to repeatedly declare new layouts as a project goes along. As more layouts gets declared, it can get quite difficult to manage and change these layouts when the need arises.

Because of this, I’ve been toying with the idea of consolidating different kinds of layouts into a sass map and calling the maps with Susy. Thankfully, I managed to hit onto something decent recently. This post shares my method for organizing layouts with Susy

Overview of the method

The very first requirement that I had was that the Sass map could house different layouts for various responsive breakpoints, and the layouts themselves must be easily differentiatable.

$layouts: (
  name-of-layout: (
    breakpoint-1: full,
    breakpoint-2: 9 of 12,
  ),
);

In each layout, I was able to add a breakpoint argument and allow it to take any number of keywords that form the span() mixin that susy provides.

In addition to this, I would like to be able to recursively get futher layouts within layouts themselves.

Here’s an example of what I mean.

$layouts: (
  content: (
    med: full,
    large: 9 of 12

    gallery: (
      small: full
      large: 3 of 9
    )
  )
);

In this case, wouldn’t it be great if we could write something like @include get-layout(content large) or @include get-layout(content gallery large) and Susy will create that content block automatically?

When doing responsive layouts, this makes it as easy as the following:

.content {
  @include get-layout(content med);
  @include breakpoint(large) {
    @include get-layout(content large);
  }
}

This makes a ton of semantic sense and it could be reused for other areas if required.

Turns out, its relatively simple to accomplish.

Setting the method up

3 things are required for setting this up. The first is obviously the layouts map I mentioned above.

$layouts: (
  content: (
    med: full,
    large: 9 of 12,
  ),
  sidebar: (
    med: full,
    large: 3 of 12,
  ),
);

The second requirement is the map-fetch function found here.

The third and final requirement is to construct a get-layout function and mixin so you could use it just like how you’ll use a span mixin or function.

@mixin get-layout($args, $map: $layouts) {
  @include span(map-fetch($map, $args));
}

@function get-layout($args, $map: $layouts) {
  @return span(map-fetch($map, $args));
}

That’s all you need to create a neatly organized sass map packed with the juicy Susy features.

Using the method

Once you setup the mixins and functions, using it is as simple as calling the key to the map you’re trying to use.

Once again, here’s a quick example of how to use it.

.content {
  @include get-layout(content med);
  @include breakpoint(1200px) {
    @include get-layout(content large);
  }
}

You might want to create a separate map for the breakpoints so large = 1200px and you can write the keyword instead, but thats another topic.

If you use this or have an improvement to make, let me know what you think!