Things are getting easy with every passing day and the community is seeking to leverage new concepts and save time immeasurably.
SASS we all know is well known as CSS with superpower and Yes, it is literally making our life easier with its powerful syntax, and functions, I have just spent a few minutes exploring it, and here are my quick points that make it the perfect fit for your next project.
How to use:
On your project initially npm install -g sass
Sass — watch sass/:css/
So it’ll watch everything inside sass/ & will place it at CSS
WHY SCSS is powerful
It’s simple I’m describing with the help of some demonstrations which are not possible in CSS.
- Operators
We cannot use operator in normal CSS, off-coarse we can use functions with hyphens, but that sometimes doesn’t do the job, with SASS we can, check out the easiest example
5rem + 5rem (e.g)
2. Variables
For instance we have to define bg-color:grey, tons of time, so better to create a variable & write it down inside the $bg-color & just use it, that way if someone say us to change we will be able to easily do so.
3. Nesting
Proper nesting is important in SASS I have already did in the project if you’re willing to do it, please do so.
4. Mixins
@mixin is a sort of function, we can once write it and then just use it by include mixinName, and then can include in where we’re using it by @include;
5. Parameters
(parameters) are a bit interesting in SCSS, e.g if we’re willing to have different attributes to Mixin, then we can use (parameter) with $value & pass it to attribute, later on we can call them in the @include function
6. Partials
The main superpower of using SCSS is _partials, it means we’re making our ducks in a row, so it can be intended as clean code.
The reason why it starts with an underscore (_): Because we’re assuring the compiler not to touch it and execute our main style.scss file.
To bring it to the attention of the .scss file we have to import it for instance.
How to use in Main.SCSS file: To use it, simply @import “directory&name of Mixin”
These were my quick tips and tricks to use, i have created a very dummy landing page & used all these concepts, do check it out https://github.com/imhamad/sass-learning
