Remapping Ranges in Sass
Great inspiration can sometimes be found in exploring available opportunities and embracing new ideas. In this article, I’ll try to replicate a foreign concept in a familiar way, and explain why I decided to even do it.
Life moves pretty fast. If you don't stop and look around once in a while, you could miss it.Ferris Bueller
There’s no questioning that technology moves pretty fast. Ferris is too right, if we don’t pause to take stock and count our blessings, we might miss out in being able to appreciate them. It’s all too easy to get caught up in the speed and momentum of web development that we become engrossed on the goal—nailing the code review, delivering on time, etc.—that we forget to make sure we’re treading on solid ground in pursuit of our goals.
That’s why I feel extremely privileged to live and work in a time and field that has so many opportunities to learn about my interests and seek out new information. Whenever I’m unsure about a piece of work, or bored, or want to share ideas, I’m afforded the convenience of sating those desires through the Internet we’ve cultivated together.
One of the most engaging ways I’ve found, of recent, to keep myself open-minded and my tools sharp, is to seek out and participate in live coding sessions on Twitch, a website of which the primary purpose is for people to live stream video games and participate in chat rooms relating to the streams. Of particular note are the Creative category and Programming sub-category, where people showcase their painting skills, sculpt clay, perform music, and practise live coding, amongst many other interesting talents and skills. In a similar fashion, some people opt to use YouTube for live streaming, which provides a near-equivalent experience. It comes down to preference; although, I prefer Twitch’s way of doing things.
I’ve found a great deal of enjoyment in watching and participating in these live coding streams; it’s given me new perspectives on what I already know and expanded new horizons for things I don’t know but want to learn about.
It was during one of Daniel Shiffman’s streams on his YouTube channel, The Coding Train, that I was struck by a concept he was explaining, and spurned me to play around with it in a programming language I was well-versed in.
Daniel Shiffman explains the concept of
mapping a value from one range to another in this thoroughly informative video:
Although CSS is meant for expressing presentation, and operations like this are best-suited for a
real programming language, I wondered if this concept of
remapping values from one range to another is possible with Sass.
Like most of my endeavours, this Sass technique is neither revolutionary, nor is it particularly useful. But not everything need be born out of necessity and steeped in unit-testing for it to be fun. I find a lot of enjoyment in experimenting at the limits of CSS and finding unexplored avenues to solve challenges in a different way.
@function takes a variable number of parameters, three or five, and we use Sass’ built-in
if() as a ternary operator to utilise the parameters appropriately in determining the value remapped in the new range.
There really isn’t any magic going on here (as usual). Everything before the
@return statement is just checking to make sure we’ve correctly passed in the right parameters, and that we’ve given the correct number of parameters. The
@return statement performs a small calculation based on the 3–5 parameters and gives us back the remapped initial value.
To be frank, I’m having a hard time finding a great deal of use out of this operation in CSS, but you might find a persuasive reason to use it. 😉
We’ll start with some basic HTML:
Now let’s define some variables to plug into our remapping
Before we apply our different rotations to the globe, we can even use our
@function to layout our equal-width columns by remapping the index of each column to a value for the
The last parameter being passed to the
@function looks a little unusual, but you have to remember that we’re setting a value for the
left property, so the maximum value we should be setting is
100% - the width of a column. This means that we’re remapping the index of each column to a value between
100% - $number-of-columns.
Lastly, we’ll perform a similar operation as before, by remapping the index of the column to a parameter for the
rotateY value of the
transform property. In this case, we’re transitioning between ($rotation-start - $rotation-offset) (
-45deg) and ($rotation-start + $rotation-offset) (