Using SCSS Files In SPFx


Just as we use TypeScript over JavaScript, we can use SASS over normal CSS files. TypeScript will have complied with JavaScript and this JavaScript will be used in the browser.
Same here also, SASS will be converted to CSS. The purpose of SASS is to ease the developers effort by adding some programming capabilities. In short, SASS reduces the repetitions in the CSS, and the number of lines in the CSS will be less. A valid css file can be scss file. The concept is like developer will work on the SASS file and browser will be user generated css file. Below are some of the usefull features in SASS.


Let's assume a situation where we have used a particular color many times in css and the customer asked us to update the color. We need to the open the css file and we will do find and replace for this. In SASS, you can declare this color in a variable and use that variable whereever you need the color.
Using SCSS Files In SPFx
If we have multiple style sheets and we need to use the variables in other files also, then we can create a separate SCSS and add the variables in that. 
Using SCSS Files In SPFx
Then we import those files whereever we need.
Using SCSS Files In SPFx 

Extending styles

Extending styles is similar to the inheritance in object oriented programming. This is also a kind code reusability. We can define styles and that can be extending to other classes or html tags.
Using SCSS Files In SPFx
After compilation the generated css file will contain the following content
Using SCSS Files In SPFx
Nesting of styles 
In normal css if we style the inner div we need to write separate styles for each element. Sass lets you nest CSS selectors in the same way as HTML.
  1. <div class="container">  
  2.    <div class="inner-div>  
  3.       <p>Sample content</p>  
  4.       <a href="#">SASS</a>  
  5.    </div>  
  6. </div>   
The above html can be styled using SASS as below,
Using SCSS Files In SPFx
The css output will be,
Using SCSS Files In SPFx


Its like defining functions, but not same as functions. This functions will have some returns type and this is used when we need to write some logic. Functions will return a single value, but mixins return a set of styles as key value pair. Mixins can have arguements as functions.
Using SCSS Files In SPFx
CSS output will be,
Using SCSS Files In SPFx
The above are some of the features that can be used in our SPFx solution which helps to reduce the number of lines of code. Apart from this, SASS got lot of other programming concepts which include looping, conditions, built-in functions, user-defined functions, etc.