SASS/SCSS
Working with CSS is a routine for all devs :v. Do you ever get bored of writing Pure CSS that you are still writing every day? Is there a way to write CSS more professionally? Yes, let's find out in this post.
Before learning what SASS is, let's talk about CSS Preprocessor a little bit.
CSS Preprocessors is a CSS preprocessing language. It is used to help you write a CSS syntax close to a programming language and then compile it into pure CSS.
There are many CSS Preprocessors such as SASS, LESS, Stylus, etc. However, within the framework of this article, I will introduce you to SASS.
What is SASS?
SASS (Syntactically Awesome StyleSheets) is a CSS Preprocessor that helps you write CSS faster and with a cleaner structure. With SASS, you can write CSS in a clean order, manage predefined variables, share classes, or automatically compress CSS files to save space.
And What about SCCS?
SASS is designed and written by Ruby programmers. Therefore, Sass stylesheets use Ruby-like syntax with no curly braces {}, semicolons, such writing CSS is not 'close' to pure CSS so understanding and reading SASS code is difficult to understand, style like this:
Sass was like that until version 3.0 was released in May 2010, which introduced a new syntax called SCSS (Sassy CSS). This syntax aims to bridge the gap between Sass and CSS by providing a CSS-friendly syntax.
To put it simply, SCSS is an upgrade of SASS that helps us write CSS in an easier and more understandable way.
Okayyy now let's learn how to write SCSS:
Nested Rule
For example, I have a piece of HTML like this:
Let's say you just want the CSS for the ul tag with the menu class, with the pure CSS you write
If you continue to want CSS for li tag in ul tag (with class as menu) then
Then you continue to want CSS for the a tag in the li... tag, then you have to repeat the tag name (or class, or id) of the parent tag you want to css, isn't it?
Nested Rule of SASS was born to help you do the above in a simpler way.
The syntax is written as follows:
Wowww now it looks so great, isn’t it?
Variable
Variables contain values that you can use more than once, for example color codes, fonts, or font styles....
To declare a variable in SASS, we will write the $ sign along with the variable name
Mixin
With variable you can only store 1 price in that variable ? Suppose in addition to the color attribute for the a tag, what if I want to add font-size later?
Mixin is a fairly common mechanism in SASS. Its use is to bring many properties that you have conventionalized in a mix and then @include into any element without having to rewrite those attributes.
Above, I have introduced you to some common syntaxes to write CSS in SASS/SCSS.
There will be other syntaxes that I have not introduced in this article, but I think this is enough for you. Try out this new way of writing CSS and let me know what you think 😏