Finally, we upgraded SASS to a new version of SASS, which brings tons of changes to your development. It started in SharePoint Framework version 1.15, and the transition is now completed in 1.16.1. While importing 3rd party CSS via ‘@import’ is still possible, this option will be lost at some point.
Let me explain what other options you have to import 3rd party CSS to your web parts or extension CSS.[Read more]
It’s been some time until finally sass-dart, and now only as sass arrived in the SharePoint Framework. With this upgrade, you can use the latest language improvement in SASS. This upgrade is only available in all new SharePoint Online Projects.[Read more]
Building a grid system in the past had a lot to do with math. Luckily, implementing a grid system has dramatically changed over the last years. You don’t rely on any framework such as Fluent UI to get your things done right.
SharePoint also has a concept of single part app pages. This page type gives you an entirely blank canvas, enabling the full potential and possibilities for an application. It also comes without any grid system, but this is something we can address.
Its been a while since the last release for my toolset for Theming in SharePoint development. I work on a product, and I have to make sure that the web part design is flexible enough to work great with any SharePoint applied theme. I discovered many changes in the currently available theme slots.
The support in case of SASS variables in your standard SharePoint project is limited. It was time to update my tool, but it comes with more great features that only SASS variables.
When you put your custom web part in a coloured page section in SharePoint, you might have recognised that there is a white border around the web part.
Web Part in coloured and uncoloured section
CSS is currently not capable of scoping the design only to a component on a web page. It is just possible through different class names for elements on the page. To avoid the inference of same style sheet classes on the same page, SPFx post-fix every class name used in the web parts CSS files. There are also hidden gems that allow you to change this behaviour dynamically as required and sometime the class names shouldn’t be renamed at all cost. Enough about the theory lets take a closer more detailed look.
A while back I wrote about on how to use the theme slots in the SPFx projects through SASS. It allows you to write web parts that reflect the default theme colours of a site. Instead, using fixed colour values, you can use variables in the CSS code of your artefacts.
To make the overall process faster I recently released and NPM packages including all the SASS colours plus some extras.
DEPPRECATED This blog post is outdated please implement the new version of this feature see: How to make CSS Variables work in SPFx web parts.
While Waldek Mastykarz and I were working on a new project, we ask ourselves what it needs to create the web part corresponding to the current site theme colors.
After a small research, we found the solution for that.
The new SharePoint Framework has a smart way to avoid conflicting CSS definitions. Therefore all style sheet classes will be post-fixed with a unique random string and converted to a JSON object. In your web part code, you can use the same class name as you used in your style sheets and the variable will be automatically replaced with the random class name string. So far the good parts of the SharePoint Framework.
In practice, this has some limitations and challenges.