2020-02-17
2809
#css
Supun Kavinda
14066
Feb 17, 2020 ⋅ 10 min read

The definitive guide to SCSS

Supun Kavinda I started as a self-taught PHP developer before creating my own company, Hyvor. I am particularly interested in physics and machine learning.

Recent posts:

the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Should you use if() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 min read
View all posts

4 Replies to "The definitive guide to SCSS"

  1. Thank you so much for this simple and very enlightening tutorial. I knew a basic of css and nothing of scss. Now I can compile the files and update my website easily.

  2. Under “Using & in nesting” you show 2 examples: one in CSS that the SCSS ultimately gets converted to, and one in SCSS. You then state about the SCSS that “you can achieve the same effect much more easily with SCSS by using the & character in nesting. However, both examples are 8 lines of code and not much different. What exactly was “much easier”?

    Though writing in SCSS can save you a lot of repetition in the id/class hierarchy, it is ultimately more complex since you are adding in variables, mixins, and functions that a developer needs to spend a lot of time hunting down and investigating to find out where and how to modify something. And all the SCSS is doing is writing vanilla CSS anyway — something grandpa already knows how to do without needing to learn a new language or use a CSS processor 🙂

Leave a Reply