This document provides an overview of using SASS in SharePoint Framework (SPFx) web parts. It discusses compiling SASS to CSS, autoprefixing CSS, and TypeScript class compilation. SASS allows for variables, nesting, mixins and other features that make CSS more modular and reusable. In SPFx, SASS files are compiled to CSS and TypeScript, with class names postfixed to avoid conflicts. Global selectors can avoid class name renaming. Theming is supported through Office UI Fabric color variables.

1. CREATE
SASSY
WEB
PARTS
Developer Guide to SASS usage in SPFx

5. !!! WARNING !!!
YOU WILL SEE
SOURCE CODE
!!! WARNING !!!

6. OUR GOALS
§Sketch and develop web parts
§Create your own reusable CSS
§Handle external CSS properly in
SPFx
§Apply themes to your web parts

7. TYPESCRIPT
is a typed superset
of JavaScript that
compiles to
JavaScript

8. SASS –
SYNTACTICAL AWESOME STYLE
SHEETS
is a superset and
programming
language
of CSS that
compiles to CSS

9. PROGRAMMING LANGUAGE?
VARIABLES
$brand-color-main: #DD304D
$default-padding: 10px
TYPES
numbers:
1.2, 13, 10px
strings:
"foo", 'bar', baz
colors:
blue, #04a3f9, rgba(255, 0, 0, 0.5)
boolean, null, lists of values,
maps
PROGAMMING
@if
@else
@for
@each
@while
@debug
@warn
@error

10. MORE FEATURES? -- FUNCTIONS
@function addition($a, $b) {
@return $a+$b;
}
// Function
a {
padding: addition(10px, 30px);
}
// Result
a {
padding: 40px;
}

11. MORE FEATURES? -- MIXIN
@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}
h1 {
@include headline(green, 12px);
}
// Result
h1 {
color: green;
font-size: 12px;
}

12. MORE FEATURES?
PLACEHOLDER EXTEND
// Template Definition
%box{
display: block;
width: 300px;
height: 150px;
}

13. MORE FEATURES?
PLACEHOLDER EXTEND
// Red Box
.red-box{
@extend %box;
background-color: red;
}
// Green Box
.green-box{
@extend %box;
background-color: green;
}

14. MORE FEATURES?
PLACEHOLDER EXTEND
.red-box, .green-box {
display: block;
width: 300px;
height: 150px;
}
.red-box {
background-color: red;
}
.green-box {
background-color: green;
}

15. MORE FEATURES?
PLACEHOLDER EXTEND
.red-box, .green-box {
display: block;
width: 300px;
height: 150px;
}
.red-box {
background-color: red;
}
.green-box {
background-color: green;
}

16. NESTING - PARENT SELECTOR - &
a{
color: teal;
&:hover{
color: pink;
}
&:visited{
color: teal;
}
}

17. NESTING
a{
color: teal;
}
a:hover{
color: pink;
}
a:visited{
color: teal;
}

18. NESTING – PARENT SELECTOR - &
.box{
display: inline-block;
width: 300px;
height: 200px;
color: black;
&-label{
height: 50px;
background-color: black;
color: white;
}
}

19. NESTING – PARENT SELECTOR - &
.box{
display: inline-block;
width: 300px;
height: 200px;
color: black;
}
.box-label{
height: 50px;
background-color: black;
color: white;
}

21. LEAST IMPORTANT FEATURE IN
HTML
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
@import url;
@import url list-of-media-queries;

22. HOW BROWSER HANDLE
1. Load CSS
2. finds @import
3. Load CSS
4. parse both CSS
5. Render page
HTTP Request
HTTP Request

23. MOST IMPORTANT FEATURE IN
SASS
Works same as in HTML but different
• @import url(‘http://getbootstrap.com/someurl’)
HTML import
• @import ‘somefile.css’
Merges file directly into CSS
@import <file | url>;

24. MOST IMPORTANT FEATURE IN
SASS
• Partial file through the ‘_’
• File won’t be converted ’.css’ file
• Import Reusable components
• Helps you strucuture your CSS Better
@import ‘_custom.scss’;
@import ‘custom’;

25. IMPORT IN SPFX
• Import CSS from any npm package
• Import CSS from bower components
@import ‘_custom.scss’;
@import ‘custom’;
@import ‘node_modules/office-ui-fabric/dist/fabric.css’

26. CONGRATULATION
SASS Certified

27. HOW I WORK

31. MY WORKFLOW
SKETCH AND DESIGN
DOCUMENT STYLES
MOVE IT TO SPFx

32. DOCUMENT STYLES
•Style Guide
•Pattern Library
•Simple Style
for SP/O365 and SPFx
• React Components

33. DEMO

35. BENEFITS
- Focus on code design
- Reusable components
- Cross browser testing
- No documentation effort
- Refactor components
Common Tool in Web Design

36. BRING IT
TO SPFX

37. SASS COMPILATION IN SPFX
COMPILE SASS
AUTOPREFIX
POSTFIX / TS Class Compilation

38. AUTOPREFIXING – WHAT IS IT?
.round {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox
4, iOS 4, Android 2.1+ */
border-radius: 12px;
}

39. AUTOPREFIXING – WHAT IS IT?
.round {
border-radius: 12px;
}

40. AUTOPREFIXING – WHAT IS IT?
.round {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox
4, iOS 4, Android 2.1+ */
border-radius: 12px;
}

41. HOW DOES AUTOPREFIXING
WORK?
1. Lookup attributes on caniuse.com
2. Checks prefixes needed
3. Adds it to CSS

42. BENEFIT – AUTOPREFIXING
Cleaner CSS / Less Headache
Configured to support Office 365 /
SharePoint optimal
No legacy code removal

43. SASS COMPILATION IN SPFX
COMPILE SASS
AUTOPREFIX
POSTFIX / TS Class Compilation

44. POSTFIXING
.round {
...
}
.round_f6d5fd65{
...
}
BEFORE AFTER

45. POSTFIXING
.round {
...
}
.round_f6d5fd65{
...
}
BEFORE AFTER
Make class name unique

46. POSTFIXING
•Web Part cannot effect the overall
experience
•Different web parts – same classes not
possible
•Makes it hard to share code across web
parts – even in same project

47. TYPESCRIPT CLASS COMPILATION
•Each CSS class à style.YourClassName
•CSS becomes somewhat type safe
LIMITATION:
invalid class name – .card-hover
JS doesn’t allow dashes in variable names

48. TYPESCRIPT CLASS COMPILATION
Typescript class = JSON Object
var styles = {
'my-class': 'my-class_2023f0bf’
}
style.my-class //Fails
style[‘my-class’] // CORRECT but not type safe

49. A CLOSER LOOK IN SPFX

50. RESULT OF SASS IN SPFX
1. /src/**/mysass.module.scss – source file
2. /lib/**/mysass.module.css – compiled CSS
/lib/**/mysass.module.scss.d.ts – type definition
/lib/**/mysass.module.scss.js – style object
/lib/**/mysass.module.scss.js.map – debug map

51. AVOID CSS CLASS NAME RENAME
:global – pseudo selector
.spsMilan {
:global { // Everything in here won’t be replace
@include card-hoverup("green", green,
white, 0.6);
}
}

52. WHEN TO USE GLOBAL?
•Good option for external CSS
•Use it wisely
•Use it inside the container only

53. THEMED WEB PARTS
•Office UI Fabric supports theming
•Use variable colors
•User color variables
"[theme:themePrimary, default:#0078d7]"

55. n8d.at/blog
@StfBauer
Information Architect
Vienna / Austria