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
[gist id=”b36ea4d22606bea80c07″ file=”susy-get.scss”]
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.
$key- The key that we want to get a value for.
$layout- 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:
$layout- Convert the
$layoutparameter to a map. It defaults to a map, but it could be passed in as a Layout shorthand. $_options- 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
$layoutparameter – but keep in mind that thesusy-getfunction might be called with a$layoutargument and if that’s the case it wouldn’t have had the$susyor$susy-defaultsmaps merged in. $_break- 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.
$_return- 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).