Style SXA 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/<Tenant>/<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 IntegratedTerminal.

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

    Note

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

  6. 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:

    C709E1E03EEC472A9473373CE509E1F2.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:

    8A152B19D6D04ADB865CD549275DB8CE.png

    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.

    199C2C22B9A246198B2ABAB6AA88E44C.png

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

    65452D317EBE4AF6AD8614FED0933C2A.png
    3F797E137BC2425AA54477A9C2C19D6E.png

    variants

    Contains additional styling for rendering variants. You can change the default CSS styles to making styling changes to rendering variants.

    F9F1D95814684C248F5E5907BAFD7E65.png

    renderings

    All self-contained renderings in their own .scss partial. For example, you may need to change the maximum width of the map rendering:

    A5AB050CC9CB4981855DEF5AD663EF39.png

    main.scss

    Output file that brings together all styling files that set the global styles for your site.

    D0C71B70D7F34BF99F7C4B61E91D909F.png

    cookie-notification.scss

    To determine how cookie notifications display.

    overlay.scss

    To determine how pop-ups work for your site.