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