How to access assetVar in a nested form

[HitArrowLegend]

I added some nestedforms in my theme.yaml to tidy things up. The document was getting so long that it's unhealthy to keep it this way.
An issue arised though as I can't seem to be able to use the value of assetVar in my scss files. Every time it says it's undefined.

Any idea ? (this is from my theme.yaml)

form:
    fields:
        site_name:
            label: Style Properties
            type: section       
    tabs:
        fields:
            test_submenu:
                tab: Test
                type: nestedform
                form:
                    tabs:
                        fields:
                            first_item:
                                tab: First Tab
                                type: section
                                label: First Item
                            second_item:
                                label: Test Color
                                type: colorpicker
                                tab: First Tab
                                assetVar: 'theme-second_item'
                            third_item:
                                tab: Second Tab
                                type: section
                                label: First Item
                            fourth_item:
                                tab: Second Tab
                                type: text
                                label: Text
                                assetVar: 'testtext'

[bennothommo]

@HitArrowLegend my understanding is there's no concept of "arrays" in SCSS/LESS variables, and as nested forms return an array, we can't convert these to the corresponding variables in SCSS/LESS.

[HitArrowLegend]

Can't those nested forms be converted to maps ? https://codepen.io/HitArrowLegend/pen/eYGJZrG

form:
    tabs:
        fields:
            h1-settings:
                tab: Headings
                type: nestedform
                assetVar: 'h1-settings'
                label: H1 Settings
                form:
                    tabs:
                        fields:
                            font-size:
                                label: Font Size
                                tab: Font Size
                                type: text
                                assetVar: 'h1-font-size'
                            font-weight:
                                label: Font Weight
                                tab: Font Weight
                                type: text
                                assetVar: 'h1-font-weight'
                            color:
                                label: Color
                                tab: Color
                                type: text
                                assetVar: 'h1-color'
                            margin-bottom:
                                label: Margin Bottom
                                tab: Margin Bottom
                                type: text
                                assetVar: 'h1-margin-bottom'
            h2-settings:
                tab: Headings
                type: nestedform
                assetVar: 'h2-settings'
                label: H2 Settings
                form:
                    tabs:
                        fields:
                            font-size:
                                label: Font Size
                                tab: Font Size
                                type: text
                                assetVar: 'h2-font-size'
                            font-weight:
                                label: Font Weight
                                tab: Font Weight
                                type: text
                                assetVar: 'h2-font-weight'
                            color:
                                label: Color
                                tab: Color
                                type: text
                                assetVar: 'h2-color'
                            margin-bottom:
                                label: Margin Bottom
                                tab: Margin Bottom
                                type: text
                                assetVar: 'h2-margin-bottom'

could be converted into

$h1-settings: ("font-size": $h1-font-size,"font-weight": $h1-font-weight,"color": $h1-color,"margin-bottom": $h1-margin-bottom);

$h2-settings: ("font-size": $h2-font-size,"font-weight": $h2-font-weight,"color": $h2-color,"margin-bottom": $h2-margin-bottom);

we could then type

h1, .h1 {
  @each $rules, $value in $h1-settings {
    #{$rules}: $value;
  }
}
h2, .h2 {
  @each $rules, $value in $h2-settings {
    #{$rules}: $value;
  }
}

that would render

h1, .h1 {
  font-size: 4em;
  font-weight: 600;
  color: pink;
  margin-bottom: 0em;
}

h2, .h2 {
  font-size: 2em;
  font-weight: 400;
  color: red;
  margin-bottom: 3em;
}

Major benefit would be uncluttering the theme settings in case we have tons of options. Obviously it's not a pressing matter. I just thought it was odd this wasn't a thing already

[bennothommo]

It may indeed be possible - I haven't looked into it too deeply yet. It would be dependent on the capabilities of the wikimedia/less.php and scssphp/scssphp libraries. The theme settings page wasn't intended to be used for a huge number of variables, since it seemed more likely that things like structure and content would be controlled in the pages and templates themselves.

If you want it looked at, at some point, feel free to add it as an issue. At this point though, it's extremely low priority. Marketplace first, obviously ;)