No Three Snowflakes Are Alike

tagged under ,
reading time ~4 mins

In Unique Pairs in Sass I outlined a Sass function I developed in pursuit of generating a list of unique pairs from a given list of data. While this technique certainly isn’t so powerful or far-reaching as to cause you to refactor all of your Sass, once you find yourself needing to dynamically generate unique pairs, the Sass function shoulders the weight of any complexity. Things like between X and Y are perfectly suited to leverage this function.

But what about when you want to generate unique groups of more than 2 items? Multiples of 3, 4, n?

We’ll need to make sure our dataset contains more than n items—making unique groups of three items from a dataset of only three items would make our function entirely moot. From there, refactoring the function mostly comes down to keep track of how we’re iterating through the items in the dataset and repeating this iteration in a recursive-like way the same number of times as items per unique group.

Let’s just jump right into it

As with the previous version of the function, it can accept the required dataset as either a List or Map. Using our mathematical formula from before, we can plug in our variables and figure out how many unique multiples to expect from a dataset.

Let n = size of dataset
Let m = items / group

n(n−1)⁄m

So, from a dataset of size 4, if we want a group size of 3, we can expect 4 unique groups:

4(4−1)⁄3 = 4

In Action

$list:
    top,
    right,
    bottom,
    left;

@each $unique-group in unique-groups($list, 3) {
    $unique-group-first:  nth($unique-group, 1);
    $unique-group-second: nth($unique-group, 2);
    $unique-group-third:  nth($unique-group, 3);

    .border--#{$unique-group-first}-and-#{$unique-group-second}-and-#{$unique-group-third} {
        border-#{$unique-group-first}:  5px solid black;
        border-#{$unique-group-second}: 5px solid black;
        border-#{$unique-group-third}:  5px solid black;
    }
}
.border--top-and-right-and-bottom {
    border-top:    5px solid black;
    border-right:  5px solid black;
    border-bottom: 5px solid black;
}

.border--top-and-right-and-left {
    border-top:   5px solid black;
    border-right: 5px solid black;
    border-left:  5px solid black;
}

.border--top-and-bottom-and-left {
    border-top:    5px solid black;
    border-bottom: 5px solid black;
    border-left:   5px solid black;
}

.border--right-and-bottom-and-left {
    border-right:  5px solid black;
    border-bottom: 5px solid black;
    border-left:   5px solid black;
}

If you find a clever use for this @function, I’d love to see it in action on your own projects, so hit me up and let me know!

Latest Articles

All Articles