Sass Helpers for Dynamic Asset Paths in NetSuite

TL;DR Opening

Sass Helpers in NetSuite provide a mechanism for maintaining dynamic paths to assets, enhancing theme customization. These helpers ensure that assets can be accessed without breaking links, regardless of version changes in themes or extensions.

What Are Sass Helpers?

Sass Helpers are tools that facilitate the dynamic referencing of assets like images and fonts when customizing styles for themes in NetSuite. By using these helpers, developers can avoid hardcoded paths in their code, which often lead to broken links when themes or versions are updated.

Importance of Not Using Absolute Paths

When working with themes, it is crucial to avoid absolute paths in your code customizations. Assets can be stored in different locations based on the specific vendor, theme, and version. Using absolute paths can lead to broken links as assets shift locations with updates. Instead, utilize the provided Sass helpers to ensure paths remain dynamic and adjustable.

Key Sass Helpers

Here are two primary Sass Helpers that can assist in accessing theme and extension assets:

getExtensionAssetsPath($asset)

• Purpose: Access pre-existing assets included with an active extension.
• Usage: In extension overrides (Sass).

Example Syntax in a Sass File:

body {
   background-image: url(getExtensionAssetsPath('img/background-image.png'));
}

Example Result: This helper compiles to:

<FULL_PATH>/extensions/<VENDOR>/<EXTENSION>/<VERSION>/img/background-image.png

getThemeAssetsPath($asset)

• Purpose: Access new and pre-existing assets in your theme directory.
• Usage: In extension overrides and theme customizations (Sass).

Example Syntax in a Sass File:

body {
    background-image: url(getThemeAssetsPath('img/background-image.png'));
}

Example Result: This helper compiles to:

<FULL_PATH>/extensions/<VENDOR>/<THEME_NAME>/<VERSION>/img/background-image.png

Best Practices

• Always use Sass Helpers when referencing assets to avoid broken paths.
• Maintain code readability by utilizing these helpers consistently across customizations and overrides.

Who This Affects

• Developers: Those implementing custom themes for NetSuite.
• Administrators: Users managing theme deployment and asset integration.

Key Takeaways

• Sass Helpers streamline theme customization by managing dynamic asset paths.
• Avoiding absolute paths prevents potential link failures after theme updates.
• Utilizing helpers maintains compatibility with theme versioning in NetSuite.

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