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:

Task Scheduling and cron Jobs in Node Using node-cron

Scheduling tasks in Node.js using node-cron

From basic syntax and advanced techniques to practical applications and error handling, here’s how to use node-cron.

Godwin Ekuma
Nov 12, 2024 â‹… 7 min read
Working With The Angular Tree: Flat Vs Nested Trees And More

Working with the Angular tree

The Angular tree view can be hard to get right, but once you understand it, it can be quite a powerful visual representation.

Lewis Cianci
Nov 12, 2024 â‹… 21 min read
Relay logo with an orange circuit-like path on a blue background, representing the Relay GraphQL client. The article covers building real-time applications in Relay 17, including features like optimistic UI updates, GraphQL subscriptions, and Relay Resolvers.

Building a real-time application with Relay 17

Build a fast, real-time app with Relay 17 to leverage features like optimistic UI updates, GraphQL subscriptions, and seamless data syncing.

Alec Brunelle
Nov 12, 2024 â‹… 9 min read
Vue.js logo over a dark, textured purple background. The article discusses using defineExpose and in Vue 3 to enhance component interaction and enable dynamic theming.

defineExpose and <style vars> in Vue 3 for component interaction and theming

Simplify component interaction and dynamic theming in Vue 3 with defineExpose and for better control and flexibility.

Clara Ekekenta
Nov 7, 2024 â‹… 8 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