scss variables to camel case keys

scss-to-camel.js

const vars = [
	// nav
	"$nav-bg-color",
	"$nav-text-color",
	"$nav-default-height",
	"$nav-font-family",
	"$nav-border-bottom",
	"$nav-box-shadow",
	"$nav-link-color",
	"$nav-link-color-hover",
	"$nav-link-active-border-bottom",
	"$nav-link-font-size",
	"$nav-link-font-family",
	"$nav-link-margin",
	"$nav-link-padding",
	"$nav-dropdown-parent-caret-default-color",
	"$nav-dropdown-parent-caret-hover-color",
	"$nav-dropdown-parent-caret-size",
	"$nav-dropdown-parent-caret-left-margin",
	"$nav-dropdown-menu-box-shadow",
	"$nav-dropdown-menu-bg-color",
	"$nav-dropdown-menu-link-padding",
	"$nav-logo-height",
	"$nav-logo-margin",
	"$nav-icon-margin",
	"$nav-menu-bg-color",
	"$nav-menu-text-color",
	"$nav-menu-font-family",
	"$nav-menu-link-color",
	"$nav-menu-link-color-hover",
	"$nav-menu-width",
	"$nav-menu-height",
	"$nav-menu-content-width",
	"$nav-menu-content-padding",
	"$nav-menu-content-padding-lg",
	"$nav-menu-content-padding-top",
	"$nav-menu-featured-link-font-size",
	"$nav-menu-featured-link-font-family",
	"$nav-menu-featured-link-font-weight",
	"$nav-menu-featured-link-margin",
	"$nav-menu-standard-link-font-size",
	"$nav-menu-standard-link-font-family",
	"$nav-menu-standard-link-font-weight",
	"$nav-menu-standard-link-margin",
	"$nav-menu-minor-link-font-size",
	"$nav-menu-minor-link-font-family",
	"$nav-menu-minor-link-font-weight",
	"$nav-menu-minor-link-margin",
	"$nav-menu-close-icon-font-size",
	"$nav-menu-transition",

	// animation
	"$animation-distance-x",
	"$animation-distance-y",
	"$animation-duration",
	"$animation-delay",
	"$animation-easing",

	// carousels
	"$carousel-height-xs",
	"$carousel-height-sm",
	"$carousel-height-md",
	"$carousel-height-lg",
	"$carousel-height-xl",
	"$carousel-mobile-height-xs",
	"$carousel-mobile-height-sm",
	"$carousel-mobile-height-md",
	"$carousel-mobile-height-lg",
	"$carousel-mobile-height-xl",
	"$carousel-split-content-background-color",
	"$carousel-split-content-text-color",
	"$carousel-split-content-max-width",
	"$carousel-split-content-box-shadow",
	"$carousel-split-content-border",
	"$carousel-split-content-offset-x",
	"$carousel-split-content-offset-y",
	"$carousel-split-button-color",
	"$carousel-split-button-background",
	"$carousel-split-button-border",

	// contact
	"$contact-component-color",
	"$contact-component-background",
	"$contact-component-padding",
	"$contact-component-border",
	"$contact-component-shadow",

	// footer
	"$footer-padding-top",
	"$footer-padding-bottom",
	"$footer-padding-sides",
	"$footer-primary-bg-color",
	"$footer-primary-text-color",
	"$footer-secondary-bg-color",
	"$footer-secondary-text-color",
	"$footer-tertiary-bg-color",
	"$footer-tertiary-text-color",
	"$footer-column-padding",
	"$footer-primary-social-media-icon-filter",
	"$footer-secondary-social-media-icon-filter",
	"$footer-tertiary-social-media-icon-filter",
	"$footer-link-list-item-margin",

	// iframe
	"$iframe-component-padding",
	"$iframe-margin-top",
	"$iframe-height-xs",
	"$iframe-height-sm",
	"$iframe-height-md",
	"$iframe-height-lg",
	"$iframe-height-xl",
	"$iframe-mobile-height-xs",
	"$iframe-mobile-height-sm",
	"$iframe-mobile-height-md",
	"$iframe-mobile-height-lg",
	"$iframe-mobile-height-xl",

	// media copy
	"$media-copy-heading-font-family",
	"$media-copy-body-font-family",
	"$media-copy-button-font-family",
	"$media-copy-text-color",
	"$media-copy-text-shadow",
	"$media-copy-content-max-width",
	"$media-copy-content-image-width",
	"$media-content-padding",
	"$media-item-width",
	"$media-item-height",
	"$media-item-details-padding",
	"$media-item-details-width",
	"$media-item-details-min-height",
	"$media-item-details-color",
	"$media-item-details-bg-color",

	// overlay
	"$mfp-underlay-opacity",
	"$overlay-transition-time",
	"$play-icon-shadow-color",
	"$overlay-gallery-controls-color",
	"$overlay-gallery-controls-border-color",
	"$overlay-gallery-controls-opacity",
	"$modal-container-underlay-color",
	"$modal-container-transition",
	"$modal-close-btn-color",
	"$modal-close-btn-bg-color",
	"$modal-close-btn-color-small-screen",
	"$modal-close-btn-bg-color-small-screen",
	"$modal-close-btn-width",
	"$modal-close-btn-height",
	"$modal-close-btn-border-radius",
	"$modal-close-btn-border-radius-small-screen",
	"$modal-close-btn-font-size",
	"$modal-close-btn-font-family",
	"$modal-box-bg",
	"$modal-box-width",
	"$modal-box-width-small-screen",
	"$modal-content-padding",

	// violator
	"$violator-bg-color",
	"$violator-text-color",
	"$violator-border-top",
	"$violator-box-shadow",
	"$violator-padding",
	"$violator-z-index",
	"$violator-img-max-height",
	"$violator-img-max-width",
	"$violator-announcement-border-left",
	"$violator-close-icon-size",
	"$violator-close-icon-color",
	"$violator-close-icon-color-hover",
	"$violator-btn-color",
	"$violator-btn-bg-color",
	"$violator-btn-border",
	"$violator-btn-color-hover",
	"$violator-btn-bg-color-hover",
	"$violator-btn-border-hover",

	// social media
	"$social-media-link-group-default-padding",
	"$social-media-link-group-flex-padding",
	"$social-media-link-margin",
	"$social-media-icon-width",
	"$social-media-icon-height",
	"$social-media-icon-default-fill",
	"$social-media-icon-light-fill",
	"$social-media-icon-dark-fill",

	// tabs
	"$tab-font-family",
	"$tab-text-color",
	"$tab-bg-color",
	"$tab-text-hover-color",
	"$tab-bg-hover-color",
	"$tab-text-active-color",
	"$tab-bg-active-color",
	"$tab-padding",

	// vimeo
	"$vimeo-height-xs",
	"$vimeo-height-sm",
	"$vimeo-height-md",
	"$vimeo-height-lg",
	"$vimeo-height-xl",
	"$vimeo-mobile-height-xs",
	"$vimeo-mobile-height-sm",
	"$vimeo-mobile-height-md",
	"$vimeo-mobile-height-lg",
	"$vimeo-mobile-height-xl",
	"$play_icon_url",
	"$play_icon_default_size",
	"$play_icon_sm_size"
]

const scssVars = vars.map(s => {
	const newString = s.split('-').map(ss => {
		return (ss[0] == "$") ? ss[1] + ss.substring(2) : ss[0].toUpperCase() + ss.substring(1)
	}).join('');

	return [s, newString];

})
console.log(scssVars);