Learn to Code via Tutorials on Repl.it!

← Back to all posts
A guide to Scss and Mixin

Hi 👋

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.

Calling mixin

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

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

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

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

Note - I am not being anti-css, I am just telling a simple method to use it.

Edit - I found how to use sccs in replit here

Credits - @coding1001 for the tutorial on how to add it and sowjanya for telling me about mixin




@VulcanWM Thanks


np @sn236