group() Function for Sass Variable Management in SuiteCommerce

The group() function enhances the management of Sass variables within SuiteCommerce themes, allowing developers to organize variables logically. By creating structured groups, it simplifies the editing experience in the SMT (SuiteCommerce Theme) interface.

How Does the group() Function Work?

The group() function can be introduced at any point within your theme's Sass files, though it is recommended to declare it in the same file that contains the associated variables. Each invocation of the group() function takes a JSON object as its argument, consisting of several key properties:

Note: Variables or subgroups declared as children do not need to be predefined before group declaration.

Visual Representation

A parent group appears as a heading in the SMT side panel, while nested subgroups can be expanded or collapsed. SMT currently supports two levels of groups:

1. Parent Group
2. Child Subgroup
3. Child Variable

Example Declaration

Below is a practical example that demonstrates how to declare a parent group and its nested subgroups:

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*/
14 
15/*
16group({
17   "id": "theme-palette",
18   "label": "Theme palette",
19   "description": "",
20   "children": [
21      "$sc-color-theme",
22      "$sc-color-theme-900",
23      "$sc-color-theme-700",
24      "$sc-color-theme-500",
25      "$sc-color-theme-300",
26      "$sc-color-theme-100",
27      "$sc-color-primary",
28      "$sc-color-secondary"
29   ]
30})
31*/
32 
33/*
34group({
35   "id": "neutral-shades",
36   "label": "Neutral palette",
37   "description": "",
38   "children": [
39      "$sc-neutral-shade",
40      "$sc-neutral-shade-700",
41      "$sc-neutral-shade-500",
42      "$sc-neutral-shade-300",
43      "$sc-neutral-shade-0"
44   ]
45})
46*/
47 
48/*
49group({
50   "id": "text-colors",
51   "label": "Text",
52   "description": "",
53   "children": [
54      "$sc-color-copy",
55      "$sc-color-copy-dark",
56      "$sc-color-copy-light",
57      "$sc-color-link",
58      "$sc-color-link-hover",
59      "$sc-color-link-active"
60   ]
61})
62*/
63 
64/*
65group({
66   "id": "container-colors",
67   "label": "Containers",
68   "description": "",
69   "children": [
70      "$sc-color-body-background",
71      "$sc-color-theme-background",
72      "$sc-color-theme-border",
73      "$sc-color-theme-border-light"
74   ]
75})
76*/

When deployed, this structure appears in the SMT side panel, showcasing the parent group Palette with its nested subgroups: Theme palette, Neutral shades, Text colors, and Containers.

Efficient Variable Management

The group() function is essential for maintaining an organized theming structure within SuiteCommerce. Improved organization aids in easier theme management and enhances the ability of SMT administrators to edit styling settings, particularly when working with derived values which automatically adjust based on base selections.

Note: To see how derived styles influence the front end, refer to the Style Definitions documentation. Maintaining clear organizational structures will benefit both developers and users interacting with themes in SuiteCommerce.

Key Takeaways

• The group() function organizes Sass variables into logical groupings.
• Each group can have a parent-child structure, supporting easy navigation in the SMT interface.
• Recommended to declare group() in the same file as its associated variables for clarity.
• Enhances editing capabilities for SMT administrators and facilitates theme management.