Using SCSS Files In SPFx

Introduction

 

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.

 

Variables 

 

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.

 

 

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. 

 

 

Then we import those files whereever we need.

 

 

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.

 

 

After compilation the generated css file will contain the following content

 

 

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.

<div class="container">
   <div class="inner-div>
      <p>Sample content</p>
      <a href="#">SASS</a>
   </div>
</div>

The above html can be styled using SASS as below,

 

 

The css output will be,

 

 

Mixins

 

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.

 

CSS output will be,

 

 

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.