What the CSS — Implementing Trigonometry in SCSS, and lessons learnt

CSS, at its core, is a style sheet language. But we can do so much more by using Sass with its SCSS syntax.

Weiyuan Liu
Jun 30, 2019 · 8 min read
Image for post
Image for post
Original image, source: weiyuan

Preface (before the Trigonometry)

I love solving CSS problems ♥️ .

But vanilla CSS is kind of meh…

Image for post
Image for post
Original image, source: pixabay

What’s the solution to that?

Image for post
Image for post
Original image, source: pixabay

What the CSS? Now what do I do? How is this related to Trigonometry?

Let’s talk about an interesting styling + animation problem that I “crammed” in one of those late nights.

Image for post
Image for post

Approach #1: Load a gif

Madness! Preposterous! You should not do this unless you have no choice. Every page needs this loader. Imagine the costs for hosting multiple GIFs like this, and driving users away with higher data consumed per page.

Approach #2: Use Lottiefiles and load with JSON

This solution is actually quite good. It uses a JavaScript library, Lottiefiles, by Airbnb, and a JSON file for the animation that can be created by your team’s designers. There are also equivalent libraries for mobile clients, Android and iOS, for the ease of reusing the same work. When loaded into the page, a SVG element is rendered and animated by the library.

Approach #3: Try to draw manually with CSS (and fail ☹ )

In attempting to recreate the animation in CSS, we should first break down the problem to simpler problems to solve.

Approach #4: Revise on math, and then implement trigonometry 🌚

To find the length of the outer side of a hexagon, we can refer to the following graphic:

Image for post
Image for post
Original image, source: weiyuan

The hardest step

To implement sin would mean we need to understand how to compute the value. Fortunately, the logic to compute the value can be explained with the following Taylor Series expansion formula:

Image for post
Image for post
Original image, source: The University of British Columbia Mathematics Department

Unit tests for SCSS?

As a software engineer, the answer is clear to me from my other works — writing unit tests, and maintaining them under regression testing. However, the idea seems whacky for CSS, since UI and UX are something that should be directly experienced and visualised.

Image for post
Image for post
Original image, source: weiyuan
Image for post
Image for post
Truly “lieking” jest with SCSS - link

Solution

With confidence that our trigonometric functions work, we can implement it for our original solution. This solves the problem of incorrect length for the hexagon, without using the brute force approach.

What did I learn?

This taught me a lesson, in that beyond a styling language, SCSS opens the floodgates to the many different things that can be achieved. This is done by elevating CSS to something closer to a programming language.

The Startup

Medium's largest active publication, followed by +707K people. Follow to join our community.

Thanks to Ken Toh

Weiyuan Liu

Written by

Staff Engineer, Hubble | Former Tech Lead, Rakuten Viki | bit.ly/weiyuan

The Startup

Medium's largest active publication, followed by +707K people. Follow to join our community.

Weiyuan Liu

Written by

Staff Engineer, Hubble | Former Tech Lead, Rakuten Viki | bit.ly/weiyuan

The Startup

Medium's largest active publication, followed by +707K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store