Extend Style Sheets for Customization in SuiteCommerce

TL;DR Opening

Extend style sheets in SuiteCommerce Advanced (SCA) using the Sass scripting language to customize the look and feel of your site effectively. This guide covers best practices for file management and the use of Sass features to streamline your custom styling efforts.

How to Extend Style Sheets in SCA

SCA employs the Sass language, a powerful CSS preprocessor that allows for variables, nested rules, and mixins, making it a preferred choice for styling in complex applications. To enhance your application's styling, you can use the @extend directive within Sass to inherit styles from one selector to another. This not only keeps your styles organized but also enhances maintainability.

Creating a Custom Module for Sass

When you're ready to extend the styles, follow these structured steps to create a custom module in SCA:

1. Create a Custom Module: Organize your code effectively by creating a dedicated directory for your module under the appropriate version structure.
2. Add Your Sass File: The Sass file should contain only the new styles and extensions relevant to your customization.
3. Deploy the Module: Utilize SCA developer tools to compile your Sass code into CSS and deploy it within your application.

Using the @extend Keyword

The @extend keyword in Sass allows you to inherit styles from one selector in another. This technique streamlines your CSS by reducing redundancy. Here’s a basic example:

1.button {
2  color: blue;
3}
4 
5.alert-button {
6  @extend .button;
7  color: red;
8}

This results in:

1.button, .alert-button {
2  color: blue;
3}
4 
5.alert-button {
6  color: red;
7}

Nesting in Sass

SCA allows the use of the ampersand (&) for nesting classes, simplifying your Sass files. For instance:

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

Compiles to:

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

Local Development with Sass

For local development, you can run gulp local, which compiles the Sass files into CSS. Leveraging source maps allows you to trace your styles in the browser, helping with debugging and development clarity.

Best Practices

• Keep Styles Modular: Organize your styles into separate Sass files corresponding to different components or sections of your application.
• Optimize Specificity: Use classes and IDs effectively to minimize the need for excessive overrides or !important declarations.
• Utilize Version Control: Follow a consistent naming convention for your modules, such as ModuleName@1.0.0, ensuring compatibility with future updates and easier maintenance.

Key Considerations

Remember that all Sass customization must be managed through the developer tools to prevent direct edits to the SCA source, ensuring that your customizations remain upgrade-friendly. Following these guidelines not only enhances your design capabilities but also aids in maintaining a clean and upgradable codebase.

Key Takeaways

• Utilize the @extend feature in Sass to streamline your CSS.
• Organize custom styles in modules following version-specific directory structures.
• Nest Sass classes using ampersands for cleaner code.
• Leverage local development tools effectively with Gulp.

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