Sass Style Definitions for Commerce Web Stores

The Commerce design architecture provides an intuitive, robust, and flexible solution that allows easy customization of the design elements of your web store experience. Commerce web stores utilize the Sass CSS extension language, which supports standard CSS syntax alongside enhanced features such as variables and imports. Understanding how these style definitions work is crucial for effective theme development.

What Are Sass Style Definitions?

Sass style definitions streamline the management of design elements in Commerce websites by providing clear structure and reusable components. They facilitate a modular approach to styling, improving maintainability and scalability of the web stores.

Design Hierarchy

The Sass styles in Commerce are organized according to a defined hierarchy that includes:

• Base Sass Styles: The foundational components designed to be mixed and reused across the website.
• Template-Specific Styles: Customized styles tailored for particular templates, extending from the base components to accommodate unique page requirements.
• Application-Level Styles: Styles specifically referencing different applications like Shopping, MyAccount, or Checkout, allowing for unique experiences per application.

Base Sass Styles

Base Sass styles consist of reusable components categorized into three main types:

For instance, basic components are stored under the BaseSassStyles directory at Workspace/<THEME_DIRECTORY>/Modules/BaseSassStyles@sc-<release>. This organization enables developers to effectively harness Sass's capabilities to create complex layouts by combining these elements.

Template-Specific Styles

Within each module, a Sass folder contains styling rules specific to the templates of that module. Typically, each template has a corresponding Sass file (e.g., address-details.tpl maps to _address-details.scss) that utilizes the Base Sass Style components as a foundation.

Colors, Typography, and Spacing

Sass style definitions encompass several vital categories:

• Colors: Represents a wide array of color variables, including primary and secondary colors, themes, links, and neutral shades. Colors are defined with relative shades (like $sc-neutral-shade-700 to $sc-neutral-shade-0), using a systematic approach to ensure consistency across the site.
• Typography: Ensures that text styling is consistent, using variables to define font sizes, line heights, and family styles.
• Spacing: Establishes margins and paddings to standardize layouts and enhance visual spacing throughout the web store.

These variables not only define a distinct look but also ensure that styles are easily maintainable as changes can be made in one central place.

Best Practices for Using Sass in Commerce

1. Leverage Base Styles: Always start with available base styles to maintain consistency.
2. Use Variables for Colors and Fonts: Define and employ Sass variables for all colors and typography to streamline updates and customization.
3. Organize Your Code: Maintain a clear directory structure within your theme for easier navigation and updates.

By following these practices, developers can create aesthetically pleasing and functional Commerce web stores that meet both user expectations and brand standards.

Source: This article is based on Oracle's official NetSuite documentation.