Aspiiire
Aspiiire ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Aspiiire ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

STOP writing CSS, 10 reasons why

STOP writing CSS, 10 reasons why

Aspiiire's photo
Aspiiire
ยทFeb 24, 2021ยท

6 min read

Prefer the video?

In this brief article a want to give you some reasons why you should stop writing CSS and start writing SASS.

In the end, the output is the same! a cool and well minified .css file.

The order of the list isn't important!

10 ~ Syntax

When you write SASS code you will see the difference instantly when you see that the code is a lot cleaner without brackets and semicolons, that matters here are tabs.

Syntax of CSS compared with sass

When you write nested selectors you will have an easier time watch this ๐Ÿ˜๏ธ

Clean parent to selector sass compared to css

9 ~ Variables

I know, I know there are variables in CSS now! But they are not so clean as in SASS

The use of variables that will help you a lot to manage your code and even for future refactoring.

For example, you can create a palette.sass file and store all your colors and then call that variable inside your buttons or divs...

The most beautiful thing in my opinion is that by just changing one line of code (where you have defined the color variable) you can change the color of your entire application.

Take a look here ๐Ÿ‘‡ Variables in sass compared to css

8 ~ Mixins

Really cool stuff, mixins help you to define reusable portions of code, you can think of them as functions, you can pass a parameter and get back your block dynamically written

Mixins in sass

7 ~ Functions

mmm.. yes mixins and functions are really similar... but, but with functions, you can return something with mixins you have only a predefined block of code

6 ~ Imports

Instead of having a super big main.css file with 200000 lines of code split by strange ### signs with titles or worst stuff you could import and export your sass files.

It is not the same thing as the link rel thing cause when you do that you are making an HTTP request :D

You will have a beautiful structure of your code for example with

  • header.sass
  • menu.sass
    • profile_image.sass
  • footer.sass

You can even import CSS files!!

The use of imports in sass

5 ~ Maths

With sass you can do pretty any operation you want, that was a big limitation with the only CSS, now no more!

Math operations with css

4 ~ Logic

Another thing missing in CSS is the logic, with SASS you have the possibility to use if statements, for while.

That will help you to write less code with more ease.

Example of is statement with sass

3 ~ Clean and easy to read code

Maybe I have said it a lot of times but really, with SASS you will see a beautiful code.

Using the combination of mixins imports variables no way that is like CSS, your code will be really clear to understand.

The only fact that you have different files that contain different parts of your code will help you when you want to change something in the future.

For example, the image that you want to change the main color with CSS... or the font family

2 ~ Faster development

Clean code means fast development, one of the things that IMHO slowed me a lot was semicolons, and another thing... semicolons, I really hated semicolons...

You can use mixins without having to repeat over and over parts of code respecting the dry principle.

1 ~ Production ready

You will get as output a clean CSS file the way that you want, if you want multiple CSS files is up to you.

Your CSS will be minimized and ready to be imported...

That's it

I hope that you enjoyed this article, it is my first article, i hope that that stuff my help someone and thanks for reading...

Let me know if you want to know how to install SASS with a youtube video or things like that...

If you enjoyed my style check out my new Youtube Channel

Thank you for your time, have a good day ๐Ÿ‘‹๐Ÿ˜

ย 
Share this