group() Function for Managing Sass Variables in SuiteCommerce

The group() function is a key feature for managing Sass variables in SuiteCommerce, allowing developers to create defined groups of variables for better organization and usability. Understanding how to effectively implement this function is essential for theme development.

What Is the group() Function?

The group() function allows you to define a structured grouping of variables within your Sass files. It is not mandatory to place the group() function immediately after variable declarations, but for clarity and maintenance, it is advisable to introduce the function in the same file as the associated variables.

Key Properties of the group() Function

Each invocation of the group() function accepts a JSON object that includes these primary properties:

Note: Variables or subgroups listed under children do not need to be defined before the group() call.

Example Implementation

Below is an example illustrating the declaration of a parent group called palette-color along with several child groups:

1/*
2group({
3   "id": "palette-color",
4   "label": "Palette",
5   "description": "",
6   "children": [
7      "theme-palette",
8      "neutral-shades",
9      "text-colors",
10      "container-colors"
11   ]
12})
13*/

Subsequent declarations show how to create groups for individual themes and color sets:

1/*
2group({
3   "id": "theme-palette",
4   "label": "Theme palette",
5   "description": "",
6   "children": [
7      "$sc-color-theme",
8      "$sc-color-theme-900",
9      "$sc-color-theme-700",
10      "$sc-color-theme-500",
11      "$sc-color-theme-300",
12      "$sc-color-theme-100",
13      "$sc-color-primary",
14      "$sc-color-secondary"
15   ]
16})
17*/

Here, you'll also find similar declarations for neutral-shades, text-colors, and container-colors. Each group allows setting subgroups and establishing a clear structure for asset management within the theme.

UI Representation in SMT

When these groups are implemented, the SMT side panel reflects the hierarchical organization:

• The top-level group is shown as a header (e.g., Palette).
• Nested subgroups can be collapsed or expanded.
• Variables can be edited directly in the SMT by administrators, enhancing the management of styles.

Note: These structures utilize derived values, meaning any base color adjustments will automatically reflect in any dependent styles, providing a seamless update experience.

Key Takeaways

• The group() function simplifies the management of Sass variables in SuiteCommerce.
• It allows for organized grouping of color variables, enhancing editing capabilities.
• The SMT Theme Skin Manager provides a user-friendly interface for developers and administrators to manage these groups effectively.