Create SASSy web parts in SPFx

SASSY WEB PART IN SPFX
Stefan Bauer
Information Architect N8D

DIAMOND, PLATINUM AND GOLD SPONSORS

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

TYPESCRIPT
is a typed
superset of
JavaScript that
compiles to
JavaScript

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

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

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

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

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

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

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

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

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

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

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

Create SASSy web parts in SPFx

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;

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

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

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’;

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’

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);
}
}

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

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

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

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

Create SASSy web parts in SPFx

More Related Content

What's hot (20)

Similar to Create SASSy web parts in SPFx (20)

More from Stefan Bauer (7)

Recently uploaded (20)

Create SASSy web parts in SPFx