# 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.

Jun 30, 2019 · 8 min read

# Preface (before the Trigonometry)

I love solving CSS problems ♥️ .

# 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.

# 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:

# 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:

# 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.

# 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.

Written by

Written by