[Stefan Bauer] For more than one decade no other SASS revolutionised the way we write CSS nowadays. In modern SharePoint development, this is the core ingredient to deliver optimised and well architecture. SASS is also one of the core ingredients to develop new customisations for SharePoint through SPFX. This session will give you an overview of the most useful concepts in SASS. Besides you will get to know some limitations in SPFX and how to handle those properly. After this session you will be able to: • Sketch and develop web parts faster • Create your reusable CSS • Apply themes to your web parts • Handle external CSS properly in SPFX

1. SASSY WEB PART IN SPFX
Stefan Bauer
Information Architect N8D

2. DIAMOND, PLATINUM AND GOLD SPONSORS

3. OUR GOALS
 SASS base concepts
 Sketch & develop web parts
 Create your own reusable CSS
 Handle external CSS properly in
SPFx
 Apply themes to your web parts

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

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

6. 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

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

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

9. PLACEHOLDER EXTEND
// Template Definition
%box{
display: block;
width: 300px;
height: 150px;
}

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

11. PLACEHOLDER EXTEND - RESULT
.red-box, .green-box {
display: block;
width: 300px;
height: 150px;
}
.red-box {
background-color: red;
}
.green-box {
background-color: green;
}

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

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

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

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

17. 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;

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

19. 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>;

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

21. 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’

22. THAT’S ALL ABOUT
SASS

23. HOW I WORK

27. MYWORKFLOW
SKETCH AND DESIGN
DOCUMENT STYLES
MOVE IT TO SPFx / SharePoint

28. DOCUMENT STYLES
•StyleGuides.io
•Pattern Library
•Simple Style
for SP/O365 and SPFx
•React Components

29. DEMO

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

31. BRING IT
TO SPFX

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

33. 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;
}

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

35. 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;
}

36. HOW DOES AUTOPREFIXINGWORK?
1. Lookup attributes on caniuse.com
2. Checks prefixes needed
3. Adds it to CSS

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

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

40. POSTFIXING – CSS MODULES
.round {
...
}
.round_f6d5fd65{
...
}
BEFOR
E
AFTER

41. POSTFIXING – CSS MODULES
.round {
...
}
.round_f6d5fd65{
...
}
BEFOR
E
AFTER
Make class name unique

42. 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

43. 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

44. 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

45. A CLOSER LOOK IN SPFX

46. 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

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

48. WHENTO USE GLOBAL?
•Good option for external CSS
•Use it wisely
•Use it inside the container only

49. DEMO

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

52. thank you
questions?
HTTPS://N8D.AT/BLOG@STFBAUER

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