Style sites with Sass
Use Sass to style your SXA site.
Sass (syntactically awesome stylesheets) is an extension of CSS. You can use Sass to style your SXA site. For example, if you want to set global styling for your site, apply specific styling to a rendering variant, or tweak the styling of a breadcrumb separator.
Every SXA theme contains a sass folder that you can use to apply styling. Creative Exchange Live works with Gulp tasks that enable you to make changes to themes and other content and synchronize to the Sitecore environment immediately. When you use Gulp tasks to modify your site, SXA automatically compiles the Sass files to standard CSS.
The sass folder contains the following root files and folders:
Root:
All self-contained renderings in their own .scss partial.
main.scss- output file that brings together all styling files that set the global styles for your site.cookie-notification.scssfile – to determine how cookie notifications display.overlay.scssfile – to determine how pop-ups work for your site.
The sass folder also contains the following folders:
abstracts folder – contains all Sass tools and helpers that set the global styling for your site. You must put every global variable (for colors, font size, and margins) here.
base folder – contains the boilerplate code for the site, typographic rules, and a stylesheet that defines the standard styles for commonly used HTML elements. You place Sass files here to add styles for more renderings. For example, to set the font style for all renderings or to set the button style.
styles folder – contains the styles for specific renderings, for example, to add a class for the tabs rendering.
variants folder – contains additional styling for rendering variants. You can change the default CSS styles to making styling changes to rendering variants.