DEV Community

Cover image for Getting started with SCSS - The CSS Preprocessor with Superpowers

Getting started with SCSS - The CSS Preprocessor with Superpowers

Abdullahi Muftau on August 19, 2023

Have you ever written lines of CSS code, and felt there should be a way to make writing CSS easier and faster? This is where SCSS (Sassy CSS) comes...
Collapse
 
sarahokolo profile image
sahra 💫

Great I came accross this article. I haven't really been a SASS user in the real sense, but I decided to try it out some days back. I used it to develop an admin dashboard UI. There were two things that made me a bit uncomfortable with it.

  • The nesting can easily get out of hand, resulting in one big pile of styling terror.

  • After saving all my variables in a seperate file, to achieve consistent styling across pages, I got hooked when trying to set a dark theme and light theme, as I could not find any way to manipulate the theme change from JavaScript.

Collapse
 
classicthedemigod profile image
Abdullahi Muftau

This can be achieved using guy functions which comes built in with SCSS

Collapse
 
sarahokolo profile image
sahra 💫

Guy functions??

Thread Thread
 
classicthedemigod profile image
Abdullahi Muftau

Sorry it's a typo I meant that it can be achieved using functions and it comes built in SCSS using the @function method

Collapse
 
ashishk1331 profile image
Ashish Khare😎

If I counter the reasons with why not to pick Sass, how will you convince someone then? I myself wrote Scss and loved it. However,

  1. CSS has variables and now even supports nesting.
  2. Following writing guides like CUBE can help you tackle conditional rendering and mixing
  3. CSS provides a calc() function which helps you perform calculations.

Woah, I myself am divided. Anyway, great article and I want to know your opinion on the same.

Collapse
 
classicthedemigod profile image
Abdullahi Muftau

Okay about the variables which CSS now supports it not yet supported by all search engines it's still in development and I also mentioned all other features like mixins, functions, components etc. And about the calc() function SCSS does that too and more mathematical function come built in with SCSS.
Generally it depends on preference and nature of project but SCSS is a nice preprocessor to use.

Collapse
 
ashishk1331 profile image
Ashish Khare😎

I asked it because current scenario of CSS is changing and they are listening to the devs. Plus, sass has been stagnant for now. You article do covers all important of SASS. Great work!

Collapse
 
classicthedemigod profile image
Abdullahi Muftau

I really appreciate this, thanks for the feedback

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer • Edited

Alternatively we can achieve most benefits with PostCSS and rather use upcoming "future CSS" features like native nesting or extended calc functions and custom properties, most of which have been supported by major browsers anyway (see Vanilla+PostCSS as an Alternative to SCSS).

But I would still go for SCSS in a collaborative project as it's a well known tool with good documentation.

Collapse
 
classicthedemigod profile image
Abdullahi Muftau

Yeah, SCSS is a great tool to use for collaborative projects

Collapse
 
isreal profile image
Adeeko Tobiloba Isreal

Well done ...

Collapse
 
classicthedemigod profile image
Abdullahi Muftau

Thanks

Collapse
 
gyauelvis profile image
Gyau Boahen Elvis

Amazing content

Collapse
 
classicthedemigod profile image
Abdullahi Muftau

Thanks

Collapse
 
samanmahmood profile image
Saman Mahmood

helpful content