Style sites with Sass

Abstract

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.

To style sites with Sass:

  1. Before you can style sites with Sass, you must (create, assign and) export your custom theme.

  2. Depending on the destination you selected, the ZIP file is available for download or the files are stored in a folder on your server. If you selected the ZIP file option, extract the ZIP file.

  3. Navigate to site/Media/Project/Your Tenant/Your Site/Your Theme and open it in Visual Studio Code.

  4. In Visual Studio Code, you can open an integrated terminal, initially starting at the root of your workspace. To open the terminal, go to View and click Integrated Terminal.

  5. Use npm and the install command to install your package: npm install.

Important

You must have Node.js (Node) installed onto your computer before you can install Gulp.

  1. Now you can start working with the Sass files. When you save the Sass file, changes are applied to the theme immediately. The sass folder contains the following root files and folders:

SXA_Styling_sass_folder.png

 

Sass file or folder

Description

abstracts

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. For example, if you want to change the color of the title:

base

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 link style.

styles

Contains the styles for specific renderings, for example, to add a class for the accordion rendering. These styles should be the same as the styles used in the Presentation folder of the site (sitecore/Content/Tenant/Site/Presentation/Styles).

variants

Contains the styles for specific renderings, for example, to add a class for the accordion rendering. These styles should be the same as the styles used in the Presentation folder of the site (sitecore/Content/Tenant/Site/Presentation/Styles).