In this article, I’m going to focus on Sass and how you can use it to organise your CSS and make yourself much more productive.

TLDR; Sass is awesome. It’ll save you some time and sanity. Keep on reading for the deets.

---

Being a web developer usually involves several technologies. At a minimum, you probably have a good understanding of HTML and CSS with a sprinkling of JavaScript for good measure. Add to that some back-end knowledge with a server-side framework and a database and you’ve got yourself a Full Stack (see what I did there?).

But, each layer of the stack over the years has been augmented slightly. Where SQL-based databases were prevalent in years past, NoSQL equivalents such as MongoDB has risen. From Microsoft, TypeScript has slowly started to make the lives of JavaScript developers much more productive. And, in the CSS world, projects like Sass have started to improve the styling, readability and function of the language.

Scss Tips

Rather than write endless paragraphs of explanations I’m going to distil SCSS into 3 basics Tips. SCSS, of course, is a very broad topic, but this will serve as a starting point.

Sass comes in 2 flavours, SCSS and SASS. I’ll focus on SCSS since it more closely resembles CSS. See https://sass-lang.com/ for more information.

Tip 1. Nesting

In a basic HTML layout, there is a <div class="outer"> tag that contains 2 <div class="inner"> tags.

To write a style that targets the inner class, in CSS you would write:

.outer { background-color: blue; }

.outer .inner {
   background-color: black;
   color: green;
}

Pretty simple. But, how could this be improved using SCSS?

#sass #scss #html #web-development #css