Base Sass Styles for Customizing SuiteCommerce Designs

Starting in SuiteCommerce, Base Sass styles provide a foundation for creating reusable and combinable design components, enabling a consistent look across your web store. These styles are structured to allow developers to build more complex template and page layouts efficiently.

What Are Base Sass Styles?

Base Sass styles represent fundamental design elements that can be iteratively combined to develop sophisticated structures such as templates and complete pages. These components are organized within the BaseSassStyles folder located at Workspace/<THEME_DIRECTORY>/Modules/BaseSassStyles@sc-<release>. Components are categorized into three main types:

• Atoms: Basic building blocks, like buttons, messages, and forms.
• Molecules: Simple combinations of atoms designed for reuse across different contexts.
• Variables: Core styling rules covering aspects like spacing and typography, referenced and extended by atoms and molecules.

Template-Specific Styles

Each module contains a Sass folder with styling rules pertinent to the respective templates. Within these Sass files, Base Sass Style components serve as starting points that get extended as necessary. Generally, each template file within a module corresponds to a single Sass file.

For example, the Address module features an address-details.tpl file in the Templates folder, paired with a /_address-details.scss file in the Sass folder. In the Sass file, the class referenced in the template is defined as follows:

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

Beyond defining module-specific styles, application-level styles cater to unique design requirements for different user experiences—Shopping, My Account, and Checkout. Each application module typically has a single layout Sass file containing several style extensions:

• 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

Moreover, you can establish application-specific dependencies for base styles or customizations in your theme manifest file, which ensures that all necessary styles are correctly included upon deployment.

Key Considerations

• Each application experience can have a distinct visual design, enhancing user interaction.
• Understanding the hierarchy of styles—base, template-specific, and application-level—allows for efficient theme customization.
• Don’t forget to define application-specific dependencies in the theme manifest to ensure proper stylings are applied.

Key Takeaways

• Structured Organization: Base Sass styles are designed for reuse and efficient development across templates and applications.
• Component Hierarchy: Styles are categorized into atoms, molecules, and variables for flexibility.
• Template Adaptability: Specific styles can be easily extended to fit unique template requirements, enhancing customization.
• Application Specificity: Different user experiences can have tailored styles, improving the web store interface.

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