Better Sass through Susy susy-get Function

Today we are continuing our look at Susy internals to get a better understanding of how Sass can be used in more advanced ways by examining the susy-get function.

susy-get Function

Comments – Lines 1-5

Every Susy function or mixin that I’ve seen starts with a comment block that explains the purpose of the code a bit and briefly describes the parameters.

Mixin Start – Lines 6-9

A basic function with a couple parameters.

The key that we want to get a value for.
The grid that we want to look for a value in.

This second parameter is interesting because of the default it sets up. It makes use of the map-merge Susy function to default the grid to search in with the Susy grid defaults overridden with the grid setup currently in use. (Take a look at Better Sass through Susy with-layout Mixin to understand how the $susy variable contains the current grid system).

Variable Setup – Lines 10-13

Inside the mixin, several variables are setup:

Convert the $layout parameter to a map. It defaults to a map, but it could be passed in as a Layout shorthand.
Build a Sass List of maps to search for the key in. This is interesting because it looks like it’s duplicating work that was done above in the default for the $layout parameter – but keep in mind that the susy-get function might be called with a $layout argument and if that’s the case it wouldn’t have had the $susy or $susy-defaults maps merged in.
Since Sass doesn’t have a way to break out of a loop, Susy uses a boolean flag to know when it should stop looking.
Placeholder for the return value.

The Loop Start – Line 15

Iterate over the list of maps ($layout, $susy, $susy-defaults) that represent the grid(s) that we are looking in to find a value.

Protection and Breakout – Line 16

It shouldn’t be possible for $opt to be anything but a Sass Map but it’s not a bad idea to provide the extra protection because if somehow it’s not the code will fail.

This is also where “breaking out” of the loop is managed. It’s not a true break, it simply finishes iterating through the $_options without descending into the body of the @if directive.

Get Keyset – Line 17

This essentially looks in the current map that we are iterating over and checks to see if it includes a key that matches the key that we are looking for.

You will notice that the $key argument to the _susy-deep-has-key function makes use of Sass’s variable arguments feature. This is to support the ability to a value from a deeply nested map by simply specifying the keys as a list.

It may seem odd that Susy first checks to see if there is a key and then gets the value for the key. This way we need to traverse the map twice – once to check the key and once to get the value. However, there is a very good reason for this. It’s possible that the value will be a falsey value, in which case we wouldn’t know if we failed our search or if we simply got a falsey value back. When looking for the key first, we can definitely know if we found a matching keyset or not because we expect a boolean back.

Get the Value and Break – Lines 18 – 21

If we did find a matching keyset (keeping in mind that _susy-deep-has-key will search through nested maps if the $key is a list) then Susy gets the actual value, stores it for return, and “breaks out” of the loop.

The Return – Line 25

All that’s left is to return what was found (or null if no match was found).