Sass Helpers

This topic applies to

Applies to

SuiteCommerce Web Stores

The following two helpers provide a means to maintain dynamic paths to your assets when customizing Sass files.

getExtensionAssetsPath($asset)

Use this Sass helper:

  • To access pre-existing assets included with an active extension

  • In your extension overrides (Sass)

Example Syntax in a Sass File:

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

Example Result:

This helper returns the active extensions’s asset path.

<FULL_PATH>/extensions/<VENDOR>/<EXTENSION>/<VERSION>/img/logo.png

getThemeAssetsPath($asset)

Use this Sass helper:

  • To access new and pre-existing assets included in your theme directory

  • In your extension overrides (Sass)

  • In your theme customizations (Sass)

Example Syntax in a Sass File:

body {
    background-image: url(getThemeAssetsPath('font-awesome'));
}

Example Result:

This helper returns the active theme’s asset path.

<FULL_PATH>/extensions/<VENDOR>/<THEME_NAME>/<VERSION>/font-awesome

Related Topics