Clean Code
SCSS is more then just CSS with variables. It can also help you with cleaning your code. For example you can place the :before inside the parent div. Let me show you how to do that…
Requirements
- Completed the SCSS Setup tutorial
First we take a look at a normal CSS code:
div{
background-color:white;
color:black;
}
div:before{
content"";
position: absolute;
}
div:hover{
background-color:gray;
}
This may works fine but it takes up a lot of space in you code an bigger code is always harder to read. But with SCSS we can place it all inside one div like this:
div{
background-color:white;
color:black;
&:before{
content"";
position: absolute;
}
&:hover{
background-color:gray;
}
}
This makes the code a lot cleaner. You can use the &:hover inside the parent to make the code shorter.