Design Hierarchy
Sass styles are organized in the following hierarchy:
-
Base Sass Styles: These are the basic components designed to be combined and reused across the site.
Template-Specific Styles: Sass styles specific to a page or template are defined here. These are extensions and combinations of the base components.
-
Application-Level Styles: Within the Base Sass Styles, you can define components that are referenced from a specific application: Shopping, MyAccount, or Checkout. This lets you define unique styling for each application experience.
Base Sass Styles
Base Sass styles are reusable components that can be iteratively combined to create increasingly complex structures such as templates and pages. All basic components are defined within the BaseSassStyles folder at Workspace/<THEME_DIRECTORY>/Modules/BaseSassStyles@sc-<release>. Components are categorized into three different types:
-
atoms: basic building blocks to be used within other structures. For example, buttons, messages, and forms.
-
molecules: simple combinations of atoms. Molecules are built for reuse but serve different purposes depending on the page context.
-
variables: basic styling rules such as spacing and typography, that are then referenced and extended in atoms and molecules.
Template-Specific Styles
Each module contains a Sass folder that defines styling rules specific to the templates used for that module. Within these Sass files, the Base Sass Style components are used as the starting point and then extended as needed. There is generally a single Sass file which corresponds to each template file within a module.
For example, the Address module has a address-details.tpl file in the Templates folder of the module with a corresponding _address-details.scss Sass file in the Sass folder of the module. Within the _address-details.tpl file, the address-details-remove-address class is referenced. This class is defined in the _address-details.scss file where base classes are extended to add styles specific for this template.
Class Referenced in Template File:
{{#if showRemoveButton}}
<button class="address-details-remove-address" data-action="remove" data-id="{{internalid}}" {{#if isInvalidAddressToRemove}}disabled{{/if}}>
{{translate 'Remove'}}
</button>
{{/if}}
Class Defined in Sass File:
.address-details-remove-address {
@extend .button-edit;
margin-right: $sc-base-margin-lvl2;
cursor: pointer;
}
Application-Level Styles
In addition to defining styles specific to a module using template-specific classes, you can define styles to be specific to each application. The Shopping, My Account, and Checkout experiences can each have a unique design.
By default, for each application module, there is a single layout Sass file with several application specific style extensions defined:
-
Workspace/<THEME_DIRECTORY>/Modules/ShoppingApplication/Sass/_shopping-layout.scss
-
Workspace/<THEME_DIRECTORY>/Modules/MyAccountApplication/Sass/_myaccount-layout.scss
-
Workspace/<THEME_DIRECTORY>/Modules/MyAccountApplication/Sass/_myaccount-layout-sb.scss
-
Workspace/<THEME_DIRECTORY>/Modules/CheckoutApplication/Sass/_checkout-layout.scss
Also, you can define application specific dependencies for base styles or customizations in the theme manifest file. Each file must also be added as a dependency to the appropriate application in the sass object before styles defined in those files can be included when you deploy. See Edit the Theme Manifest for details.