Creating Sass Variables for Custom Themes in SuiteCommerce

Creating Sass variables is essential for customizing themes in SuiteCommerce. The SuiteCommerce Base Theme SuiteApp includes the BaseSassStyles module, which organizes all Sass variables and metadata for seamless integration with Site Management Tools. Utilizing this module is a best practice when designing a new theme.

Best Practices for Creating Sass Variables

When creating your own Sass variables, adhere to the following guidelines:

• Module Specificity: If you're defining a new module as part of a theme, include all new variables and metadata directly within that module.
• Avoid Global Definitions: For variables that pertain to a specific module, define them within the appropriate module itself, avoiding global scopes.
• Shared Variables: If the variable is intended to control properties across multiple modules (like a new theme color such as $sc-color-theme-250), store it within the BaseSassStyles module.
• Manifest File Declaration: Each time you add a new Sass file to your theme, declare it in the theme's manifest.json file and relevant entry point file. This step ensures proper compilation.
• Testing: Always test new variables in your domain to ensure they appear correctly in the Site Management Tools (SMT) Theme Skin Manager.

Adding Your New Sass Files

To add new Sass files, follow these steps:

1. Create Your File: Establish your new Sass file in the designated location within your Workspace directory structure. A best practice would be:
   noneCopy

   Workspace/<THEME_DIRECTORY>/Modules/BaseSassStyles/Sass/reference-theme/_newSass.scss

2. Declare in Manifest: Open and edit the manifest.json file located at Workspace/<THEME_DIRECTORY>/manifest.json. Ensure your new files are included in the appropriate application object.
3. File Organization: Maintain organized file names to prevent collisions. Best practice suggests avoiding names that might conflict, even across different locations.

By following these best practices, you can effectively manage Sass variables and ensure that your theme remains versatile and maintainable while leveraging the SuiteCommerce environment.

Conclusion

Sass variables are a crucial component in developing tailored themes for SuiteCommerce. They enhance styling flexibility and streamline the integration process with Site Management Tools.

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