Last active
February 21, 2019 19:44
-
-
Save evanwinter/c9fafd4d666756308441d7623da4af62 to your computer and use it in GitHub Desktop.
scss variables to camel case keys
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment