Hello everyone! This project was inspired by the Traversy Media React Crash Course 2021!
Basically, what I did was that I took the concept and made a unique revision to the entire project. Instead of just using css, like plain vanilla css, I installed Tailwind CSS into the project. Also, I took interest in a CSS Preprocessor called Sass so yeah!
What I did at the time was watch the entire Sass Crash Course by the Traversy Media Youtube Channel and it was awesome.
Basically Sass is just an extension of the Vanilla CSS that we all love. But the kicker is, there must be a compiler that we should use.
There are two options:
-
Using the NPM CLI which is you have to type every single time whenever you want to compile a sass file.
-
Using an extension in Microsoft Visual Studio Code called Live Sass Compiler wherein just in a click, you are automatically "watching your .scss file" to a path or a directory.
-
In Sass, you can create variables and use them in code. For example using the dollar symbol ($) you can create a variable
-
In Sass, you can nest inside parent elements. For example if there are multiple child elements inside of a parent element, you can already style these elements inside of a styled parent element.
-
In Sass, there is a concept called "partials". Meaning you could break up your sass styling into different files and it would still produce the same result. Just use the @import rule in css and put an underscore (_)before the filename and you are good to go! :)
-
In Sass, you can also have extensions and shared properties by using the percentage symbol and using the @extend rule in css. So, you do not need to repeat the same iteration again and again, just define the shared property and use it on different classes or components.
-
In Sass, you can also create functions wherein you can create if and else statements whenever you want to define a condition (e.g. display a style in light mode or dark mode). Also, you can create mixins because you can just use the @include rule in css and just @include anymixin() function that you defined.