Best Practices for Developing Sass...

TL;DR

This article covers best practices for developing Sass in a local environment using SuiteCommerce, emphasizing module organization and configuration management for effective customization.

What is SuiteCommerce and Why is Sass Important?

SuiteCommerce is Oracle's e-commerce platform tailored for seamless integration with NetSuite. Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances styling capabilities, making it an essential tool for developers looking to implement customized designs efficiently.

Why Follow Best Practices?

Utilizing best practices during your SuiteCommerce customization ensures easier upgrades to future versions of the platform. Adhering to best practices not only facilitates smooth transitions but also allows developers to leverage new features and fixes in future SuiteCommerce releases. Here are some key practices you should follow:

Use the SCA Developer Tools: When customizing SuiteCommerce Advanced (SCA), especially for the Kilimanjaro release and earlier, rely on SCA developer tools. For Aconcagua and later releases, prefer themes and extensions unless the Extensibility API does not meet your needs.
File Naming and Structure:
- For SCA 2020.1 and later, create an extensions directory within the SC_<version> directory. Customizations go here.
- For SCA 2019.2, use SC_<version>_Live/extensions.
- For SCA 2019.1 and earlier, locate customizations in Modules/extensions.
Example directory structure:
none
```
1SC_20.1
2    Advanced
3    Backend
4    Commons
5    extensions
6    gulp
```
Module Naming Convention: Name your modules systematically using the format module_name@x.y.z, such as MyCustomModule@1.0.0. This format lends clarity and eases version tracking.
JavaScript Prototypes: When extending properties or methods in JavaScript, use prototypes rather than overriding existing functions. This approach preserves original functionality, ensuring that any enhancements or fixes in new SCA releases remain operational.
Configuration Management:
- For Vinson and later, customize using the configurationManifest.json file by creating custom modules to introduce or modify properties.
- Avoid direct changes to configurationManifest.json; instead, adjust and manage file metadata through individual JSON configuration files, sustaining the integrity of the system.

Alternatively, in pre-Vinson implementations, modify configuration properties through JavaScript files, ensuring changes to only specific properties as needed.

Working with Sass

Sass streamlines CSS management within SCA by allowing logical grouping and extension of style definitions. Utilize the @extend keyword to apply styles from one selector to another, improving maintainability and readability.

Example of Sass Nesting

To optimize your styling using cascading selectors, leverage the ampersand (&) to create nested styles. Below is an example:

css

.my-class {
   &.my-other-class {}
}

This results in the following CSS:

css

.my-class.my-other-class {}

Developing Sass Locally

Running the gulp local command allows you to compile your Sass stylesheets for local development, helping you verify that your styling changes integrate well with the overall site design. This includes naming conventions for core stylesheet files like shopping.css, myaccount.css, and checkout.css, allowing for easy debugging and class searching through browser developer tools.

Overriding Resources

When extending language files, images, or other resource files, employ the provided file override method to ensure proper customization. Each resource can only have one override, reinforcing good management of custom files.

Key Takeaways

Use SCA developer tools for customizations and maintain structured code organization.
Employ JavaScript prototypes for sustained compatibility with future SCA releases.
Manage configuration properties through guidelines adapted to SuiteCommerce versions.
Leverage Sass effectively for better styling through nesting and extensions.
Ensure all changes to resources follow the specific override conventions provided by the developer tools.

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

Frequently Asked Questions (4)

Do I need to enable a feature flag for using Sass in SuiteCommerce?

No specific feature flag needs to be enabled to use Sass in SuiteCommerce. However, you should utilize the SCA developer tools and ensure your environment is set up for local development as described in the article.

What directory structure should I use for customizations in SCA 2020.1 and later?

For SCA 2020.1 and later, you should create an `extensions` directory within the `SC_<version>` directory to place your customizations.

How should I manage configuration changes in SuiteCommerce Vinson and later?

In SuiteCommerce Vinson and later, use the `configurationManifest.json` file to introduce or modify properties by creating custom modules and manage configurations through individual JSON files rather than directly altering `configurationManifest.json`.

What is the preferred method for extending JavaScript functionality in SuiteCommerce?

The preferred method is to use prototypes to extend properties or methods instead of overriding existing functions, which preserves original functionality and ensures compatibility with future SCA releases.

Best Practices for Developing Sass in SuiteCommerce