CSS is one of those technologies that we learn to use when starting with web development. But after we find better solutions we don't really think about it. Don't get me wrong CSS is great it helps us build modern and rich ui for websites. But when I'm creating a web application for my client CSS might not be the best choice.

The Problem With Frameworks

the only problem I have with using framework such as bootstrap or tailwind is that they are a completely different way of writing CSS and a average beginner might find it difficult to use these technology right away in their project. So the problem arises how do we make css less boring and also make it easier for developers to write it?

Solution To The Problem

Let's introduce Sass also known as Syntactically Awesome Style Sheets.

Sass is a css framework that builds on top of normal css,its like typescript but for css.

But Why do i like sass so much?

to know the answer of this lets answer three questions

Why should I use sass?

1. Sass is literally css!.Yeah sass is literally css but with some extra feature. This makes developer experience amazing!

2. Sass is smart!. When you write sass you are also writing legacy support for older browsers

3. Sass is mature! sass is stable and has a large community!

So the next time someone tells you they need to use a CSS framework point them to this blog!

Now for the final part I am going to give you some resources that you can use to your advantage

.

sass Documentation: https://sass-lang.com/

SASS SCSS SYNTAX AND SASS

sass can be written in two ways using the scss or the sass way
create a file with .scss syntax to use the scss syntax
and use .sass to use the sass bracket syntax

What't the difference

SCSS does not contain any brackets and relies on indentation
SASS uses to contain a style

TIP: CHECK THE SASS DOCS TO SEE MORE ABOUT SASS VS SCSS

//scss code
.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

//sass code
 .button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

PROMOTION
If you like this content be sure to subscribe to my youtube channel as a thank you helps me a lot! :)

CHANNEL--👉https://www.youtube.com/channel/UCVN9qpxbrJ9qMPjpZf3ywpA

signing off....