Nav Button Highlighter component - now working

Customization Theme component
10

Ok, i think i found the SCSS issue.

I found these in @NateDhaliwal carousel component:
SCSS (common.scss):

@if $pagination-button-color != "" {
  --swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}

Settings (settings.yml):


pagination_button_color:
  type: string
  default: ""

For anyone else struggling:

  • inject into CSS custom properties using #{$var} syntax
  • Then use those CSS variables elsewhere for the Swiper library to read them

This works because:

  1. Settings variables can be interpolated with #{}
  2. CSS custom properties accept string values
  3. The actual styling uses the CSS variables, not SCSS functions

I’ll update this plugin with the more modern version soon.

1 Like