A guide to Scss and Mixin
This is my first tutorial. :)
So this is related to scss or sass which is a pre-processor for css which can't be run on repl unfortunately (I searched how to link it but it said you can't so if there is a way to do it on repl please comment below).
What is a pre-processor
A pre-processor makes the code easier so there is less complexity for example pug, pug is a pre-processor for html and in html for writing a class you need to write
But in pug you can write it as
(I'll write a detailed pug tutorial after this)
And if you have one element inside one element
Then you can write it as
So pre-processor's make the code more easy
Scss also known as Sass is a pre-processor for css
Variables in Sass
Writing a variable in css can be hard to remember
You need to write it like this and call it like this-
But in scss you can write it as
And call it like
It's simple(I am not being anti-css)
Now mixin makes scss super easy to use and it shortens the code too.(I am not being anti-css, I love css)
Here is the example of a mixin -
So first of all we write @ mixin(Gave a space because it could tag someone)
and then all is the name of the mixin it also place an important role, you can change the name to anything you want.
Then inside the brackets there are some variables, so when we call the mixin(which we will see in the next step) these variables are values which don't have a fixed value. The term variable itself means varying so when we call the mixin these values change according to value given and you need to have a variable either outside the bracket declared before the mixin or inside the bracket otherwise it should have a value like position has a value absolute or else it would give an error.
To call mixin we us @ include and then we give the name of the mixin and if there are variable values we change them inside the bracket
So there can be values outside the include also. Now we have written the name of the mixin after include that is all so it will connect it with that and whatever value is inside it will take it in order so first is the width then the height then the background so it will take in that order only. And we have defined $main before so you can add variables inside mixin too.
So That's how you use mixin.
Error while using mixin
I also made this error while I started using mixin. So don't make different mixin for different elements make maximum 3 and if some properties are not there and if you add you will have to make a lot of changes then add the properties after adding include.
The calculations also become easier it's just like normal math calculations.
So you don't have to use the calc() function in css.
The output would be -
Although repl doesn't support pre-processors, if you ever get a chance to use scss you can use this tutorial as a reference. Do let me know how you thought of this tutorial. Any suggestions are welcome. :)