DEV Community

Cover image for ๐ŸŽจSass: the style you want, the code you need
Akram A. Abdelbasir
Akram A. Abdelbasir

Posted on • Updated on

 

๐ŸŽจSass: the style you want, the code you need

I added the course road map.

Course Roadmap


If you are a developer or web designer, chances are you have heard about Sass at one time or another. Sass is just as easy to use as CSS but includes some additional features that make it even more powerful.

It's time to start the Sass series. In this first article of the series, we will learn what Sass is and why you need to use it for more efficient web development.

Sass is an extension of the CSS language that adds power and flexibility without getting too complicated. It provides variables, mixins, inheritance, and other handy tools for making CSS more maintainable. Sass also helps with more advanced features like code organization (partials), data-driven styles (looks), and responsive design.

In this series, we'll be going over the basics of SASS/SCSS. We'll be covering a lot of ground, from basic syntax to more advanced features. So, if you're new to SASS/SCSS or want to brush up on some old skills, this is the series for you.

So let us start with this question

Should you be using Sass or CSS? ๐Ÿค”

Thatโ€™s a question often asked, and one we can answer with a simple โ€œYesโ€. It all comes down to stylesheets vs preprocessors โ€” and itโ€™s important to get things right. SASS (and its more powerful cousin, SCSS) are writing systems that let you write faster, more flexible, and more maintainable code by way of variables, mixins, and nesting.

SASS was designed by Hampton Catlin and Chris Eppstein.
The main goal of SASS is to make it easier for developers to maintain their stylesheets and also to help them avoid some common coding problems.

This code, for instance, creates a set of classes twice: once using CSS and once with SCSS.

an example of creating a button list twice, once with CSS and once with SCSSย 

Write less and do more with Sass.

That's all about this post for today, in the next article, we will learn how to use sass in your project.

See You โค


Please feel free to reach out to me at Linkedin if you have any questions.

Latest comments (6)

Collapse
 
devarshishimpi profile image
Devarshi Shimpi

Thank You!!

Collapse
 
ak_ram profile image
Akram A. Abdelbasir

You're welcome Devarshiโค

Collapse
 
ahmed_1 profile image
Ahmed Mahmoud Kamel

Many thanks for sharing.

Collapse
 
ak_ram profile image
Akram A. Abdelbasir

โค๐Ÿ™Œ

Collapse
 
ahmed_3 profile image
Ahmed Ali

When will the next post be published?

Collapse
 
ak_ram profile image
Akram A. Abdelbasir

Inshallah, this evening

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.