3 Reasons to Learn Sass for Better Styling Structure

UpdatedNovember 27, 2022

•2 min read•View as Markdown

3 Reasons to Learn Sass for Better Styling Structure

Joshua Mendoza

Developer from NYC. Current Tech Stack: React 👨🏽‍💻 SCSS 📜

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Create a New Years Countdown Timer with Luxon.js

Hello World I welcome to you another tutorial and code along for building a countdown timer. To be able to follow along, it is best to have a good grasp of Javascript classes and its methods along with the following topics: Document Object Model(DOM...

Sep 26, 20227 min read

Create a New Years Countdown Timer with Luxon.js

What You Should Know Before You Start A Side Hustle

Welcome to the first of this series: articles based on Side Hustles for dummies by Alan Simon. You can view this series as a read-along, a summarization, or a reference. I consider my work and time spent on this series as a way to acquire more knowle...

Sep 26, 20223 min read

What You Should Know Before You Start A Side Hustle

What I Learned from Working with Recursion

Recursion is one of those computer science topics that, once you first come across your head, your thinking… is this really necessary? Why do I really need to learn this, or is it mandatory? I usually lean towards the iterative approach. But after de...

Sep 24, 20224 min read

What I Learned from Working with Recursion

I Will Build 100 Projects by the End of the Year

The most important thing I’ve learned as a developer is that it’s really easy to get stuck in tutorial hell. You get comfortable with the fact that there’s somebody out there willing to teach you, write guides, roadmaps…etc, and then one day you real...

Sep 23, 20222 min read

I Will Build 100 Projects by the End of the Year

The First Day of 100 Days: Challenge Accepted

I created a Custom Build Number with Gradient. The main focus of this project was more on CSS, and the topic I dove into was linear gradients. I started by creating a custom build number, which I will be using for the duration of this project. I will...

Sep 22, 20224 min read

The First Day of 100 Days: Challenge Accepted

JfuseCodes

12 posts

2. Implementation of DRY

As we all know, a fundamental principle in programming is Don't Repeat Yourself. Sass has a perfect system that allows for reusable code blocks where you can write the code once and reuse it anywhere to style the web page. Mixins are used for the reusability of code.

A mixin, in simple terms, is almost like a function.

The mixin is given a name, followed by parentheses that include any required parameters. Within the block, you give the properties one of the two: the parameter's name or just a regular styling.

To use the mixin, you can use the keyword @include within any class that you would want to include the predefined code block for its styling and any required parameters.

3. Interpolation

This third reason speaks for itself because this is well-known programming fundamental. Simply put, you can insert either a variable name or just a string with a number sign and curly brackets- #{}.

There are many use cases for it, but for the most part, I have used it as a way to iterate through a list of class names with identical naming conventions.

Until Next Time

I want to conclude this article by saying that these are not the only features of Sass; there are so many more ways to use Sass. But these are the three of the most valuable features that have stood out to me in my two months of working with Sass. If you give it a try, writing CSS will become perhaps less tedious or repetitive for the user. Perhaps Sass can provide a change of heart for those who dislike anything CSS.

Command Palette

Comments

More from this blog

1. CLEARER APPROACH TO CSS SELECTORS

2. Implementation of DRY

3. Interpolation

Until Next Time