SCSS in SPFx (SharePoint Framework)- Part 2

 1. Variables

Variables allow you to store values that can be reused throughout your stylesheets.

SCSS

Using Variables in SCSS

2. Nesting

Nesting allows you to nest CSS selectors in a way that follows the same visual hierarchy of your HTML.

3. Mixins

Mixins allow you to create reusable blocks of styles that can be included in other selectors.

SCSS

Using Mixins in SCSS

4. Partials and Imports

Partials allow you to break your CSS into smaller, more manageable pieces. These pieces can be imported into other SCSS files.

SCSS

5. Inheritance with @extend

The @extend directive allows one selector to inherit the styles of another.

SCSS

Putting It All Together in an SPFx Component

ExampleComponent.module.scss

ExampleComponent.tsx

Summary

In this example, we demonstrated the use of variables, nesting, mixins, partials, imports, and inheritance with @extend in SCSS within an SPFx project. This approach enhances the maintainability and scalability of your styles.