Interior Design: SharePoint Framework and Sass

Shelby Ludlow
May 22, 2018

The SharePoint Framework (SPFx) is a great tool for hooking into SharePoint in a modern, understandable way. Creating a custom webpart is simple, and styling it is done in an extremely modular fashion. This is because SPFx solutions are integrated into a page’s DOM, which is great for removing restrictions, but could cause problems with overwritten styles in places you didn’t expect. To combat this, SPFx uses CSS modules to generate specific hash names for your classes on build, making sure each class name is unequivocally unique. Since SPFx leverages modules, it makes sense that you should do the same! Keeping your Sass specific and modular makes your code a) easily understandable and b) prevents styling conflicts.

I like to think of it using an “Interior Design” metaphor. Your webpart is the house, each component is a room, the .tsx is the blueprints, and your Sass is the interior designer telling each room what it should look like. Your interior designer has to specify where the styles should be applied. When they say “the pillows should be purple”, do they mean in the living room? The bedroom? Why would they say that about the kitchen? Adding specificity keeps things simple and exact.

I’ve built a project to see this in action, and to show you how you can modularize your Sass in practice. You can download it here.

The Result: Our “Studios House”

Using the tutorial from SharePoint, I’ve created a webpart called “StudiosHouse” using the React Framework.

The final StudiosHouse.tsx code.
The final StudiosHouse.tsx code.

As you can see, I’ve created a very basic component for our house that contains a living room, kitchen, bedroom, and bathroom components or “rooms” (as well as some doors). Each room is organized with a folder containing it’s own .tsx and .scss component.

Let’s go through a specific room to see how it’s done.

Creating the Blueprints in .tsx

The kitchen .tsx blueprints.
The kitchen .tsx blueprints.

The kitchen is a simple room with a title, cabinets and a sink. Notice that you have to import styles as a class, and use the syntax “styles.X” to use your Sass classes correctly.

Styling the Kitchen: Modular Styling with Sass

The kitchen styled with Sass.
The kitchen styled with Sass.

Here we have our kitchen’s style! The classes’ hierarchy follow the hierarchy of the .tsx file, and it is all contained within one .kitchen class. You’ll notice here that kitchen has a .title class. Each room actually has a title, but because the styles have been modularized and are contained within a hierarchy, we know this .title class will only be applied to the kitchen’s title.

But what if we want consistent styling across multiple components? You can create importable, extendable styles! You can see that Kitchen.module.scss has imported another .scss file, shown below:

Modular styling with Sass.
Modular styling with Sass.

These are some classes / styles I knew I would be using across our house. To use them in my modular .scss, all I have to do is import the file, and call @extend %title_light, for example, to add these styles to a class.

So, with all our code and organization, our house is now complete!

Styling Examples

A couple Sass styling examples.
A couple Sass styling examples.

Woohoo! If you have any questions, comments or concerns, please comment down below, and I’ll try to answer as soon and as best as I can.

Leave a Reply

Your email address will not be published. Required fields are marked *