How to use SCSS to improve your CSSNicky LiuBlockedUnblockFollowFollowingApr 23CSS is super important to making your website look better than an interactive powerpoint presentation, but doing custom CSS can be a drag.
That’s where SCSS comes in! Designing stuff will still be a drag, but it does make things a little cleaner and more shorter! So here we go.
To install an SASS style sheet to an existing React.
js app, perform the following steps:npm install node-sass — saveThen rename App.
css to App.
scss and in App.
js change it from import .
/App.
css to .
/App.
scss.
SCSS improvements over normal CSS:You can use variables, which are declared using $$main-color: red;$second-color: blue;#box { color: main-color; background-color: second-color}This will result in a blue box with red text.
Of course you can just manually have typed in red for color and blue for background color, but if you are making a site with a consistent theme and wish to change the color theme, instead of going through and changing the color and background color of everything, you can just change the variables.
2.
You can nest descendants using {}#div1 { background-color: red; #p1 { color: blue; }}This is the equivalent of@div1 { background-color: red}#div1 #p { color: blue}It is a bit shorter because you don’t have to type the parent again in order to access its descendants, and saves more time the further down you have ot reach to get those descendants.
Also it looks a little more intuitive, and you will have everything grouped together, so you don’t need to search through a list of different items to try to find what you wrote for a particular descendant.
3) You now have access to loops and arithmetic.
$repeat: 4@for $i from 1 through $repeat { #line-#{$i} { opacity: .
1 * $i }}This is the equivalent of writing#line1 { opacity: .
1}#line2 { opacity: .
2}#line3 { opacity: .
4}This will have the lines labeled lines 1–3 increasing in opacity.
The more things you have to loop through, the more this will save you time.
If you wanted to have say a bunch of boxes of different colors or a bunch of objects differing in shape, rather than manually coding them all a loop will save a lot of time.
4) There are mixins.
@mixin main-item($color) { height: 500px; width: 500px; color: $color}#item1 { @include main-item(red);}This allows a fixed set of properties to be set (which can also include properties that varies based on input) which can be easily assigned to an item.
This makes it so if you have many items that you want to have either the same property (such as size or color) or want them to have similar properties aside from specific variables, you can simply write a mixin and simply include it in items (with the appropriate argument passed in).
5) Mixins can also include booleans, loops, if-else statements, and arithmetic.
@mixin color($color, $width) { @if($width > 50px){ background-color: red; } @else { background-color: blue; }}#button1 { @include color(70px)}This allows you to include the color mixin for an item, such as a button, which will automatically give it a background color based on its width.
Since button1 we use has 70px passed in as the argument, it will have its background color assigned to be blue.
6) Functions@function size-doubler($size){ @return $size * 2}#box1 { height: size-doubler(50px); width: 100px;}A function is called in place of where a number would be, and its return value will act as the number.
While almost anything you can do with SCSS you could have done with normal CSS anyway, SCSS allows some shortcuts to make life easier.
SCSS makes your code easier to read, more organized, require less coding, and easier to change.
Hopefully SCSS proves to be a convenient tool for you in the future when you are styling your web page!.. More details