Problem With CSS

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....

Comments

[Supportic]

how do we make css less boring

Solution To The Problem is Sass

but also

Sass is literally css!

Your reasoning is shakier than pudding.

the only problem I have with using framework such as bootstrap or tailwind is that they are a completely different way of writing CSS

You know that Bootstrap is built with Sass, right?

[SauhardoSengupta]

With bootstrap you have to learn a new syntax and a new style of writing css which might not be the best for beginners sass is css but with a few perks like variables mixins functions loops etc

Sass also writes legacy css for you like webkit so it works on older browsers too.bootstrap might use sass but it's method might not be the best for beginners

[SauhardoSengupta]

Do you have questions? feel free to ask!

[Tanwa Sripan]

Maybe you can add a little bit more about SASS or reference SASS documentation? Since SASS has two syntax and its SCSS that is an extension of CSS syntax, just a thought.

[SauhardoSengupta]

Tanwa Sripan Thanks for highlighting the issue we are going to fix the issue as soon as possible please check the blog again to see the updated changes...thanks again :)