CREATE SASSY WEB PARTS Developer Guide to SASS usage in SPFx
!!! WARNING!!! YOU WILL SEE SOURCE CODE!!! WARNING!!!
OUR GOALS Sketch and 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 PROGAMMING @if @else @for @each @while @debug @warn @error 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
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;
MORE FEATURES? PLACEHOLDER EXTEND // Template Definition %box{ display: block; width: 300px; height: 150px;
MORE FEATURES? PLACEHOLDER EXTEND // Red Box.red-box{ @extend %box; background-color: red; // Green Box.green-box{ @extend %box; background-color: green;
MORE FEATURES? PLACEHOLDER EXTEND.red-box,.green-box { display: block; width: 300px; height: 150px;.red-box { background-color: red;.green-box { background-color: green;
MORE FEATURES? PLACEHOLDER EXTEND.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;
LEAST IMPORTANT FEATURE IN HTML @import url; @import url list-of-media-queries; @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);
HOW BROWSER HANDLE 1. Load CSS HTTP Request 2. finds @import 3. Load CSS HTTP Request 4. parse both CSS 5. Render page
MOST IMPORTANT FEATURE IN SASS @import <file url>; Works same as in HTML but different @import url( http://getbootstrap.com/someurl ) HTML import @import somefile.css Merges file directly into CSS
MOST IMPORTANT FEATURE IN SASS @import _custom.scss ; @import custom ; Partial file through the _ File won t be converted.css file Import Reusable components Helps you strucuture your CSS Better
IMPORT IN SPFX @import _custom.scss ; @import custom ; @import node_modules/office-ui-fabric/dist/fabric.css Import CSS from any npm package Import CSS from bower components
CONGRATULATION SASS Certified
HOW I WORK
MY WORKFLOW SKETCH AND DESIGN DOCUMENT STYLES MOVE IT TO SPFx
DOCUMENT STYLES Style Guide Pattern Library Simple Style for SP/O365 and SPFx React Components
DEMO
BENEFITS - Focus on code design - Reusable components - Cross browser testing - No documentation effort - Refactor components Common Tool in Web Design
BRING IT TO SPFX
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;
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;
HOW DOES AUTOPREFIXING WORK? 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
SASS COMPILATION IN SPFX COMPILE SASS AUTOPREFIX POSTFIX / TS Class Compilation
POSTFIXING.round {....round_f6d5fd65{... BEFORE AFTER
POSTFIXING.round {....round_f6d5fd65{... BEFORE 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 style[ my-class ] //Fails // CORRECT but not type safe
A CLOSER LOOK IN SPFX
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.spsmilan { :global { // Everything in here won t be replace @include card-hoverup("green", green, white, 0.6);
WHEN TO USE GLOBAL? Good option for external CSS Use it wisely Use it inside the container only
THEMED WEB PARTS "[theme:themeprimary, default:#0078d7]" Office UI Fabric supports theming Use variable colors User color variables
Information Architect Vienna / Austria n8d.at/blog @StfBauer