I'm working with lightGallery.js and I have some troubles with overwriting the sass variables. The only variable I have been able to successfully overwrite is $backdrop-opacity all the other variables in lg-variables.scss does not take effect.
/static tree structure
├── config.rb
├── fonts
│ ├── lg.eot
│ ├── lg.svg
│ ├── lg.ttf
│ ├── lg.woff
│ ├── app-font.eot
│ ├── app-font.woff
│ └── app-font.woff2
├── images
│ └── logo.svg
├── javascripts
│ ├── components
│ │ └── lightgallery
│ │ ├── css
│ │ │ ├── lg-fb-comment-box.css
│ │ │ ├── lg-fb-comment-box.css.map
│ │ │ ├── lg-fb-comment-box.min.css
│ │ │ ├── lg-transitions.css
│ │ │ ├── lg-transitions.css.map
│ │ │ ├── lg-transitions.min.css
│ │ │ ├── lightgallery.css
│ │ │ ├── lightgallery.css.map
│ │ │ └── lightgallery.min.css
│ │ ├── fonts
│ │ │ ├── lg.eot
│ │ │ ├── lg.svg
│ │ │ ├── lg.ttf
│ │ │ └── lg.woff
│ │ ├── img
│ │ │ ├── loading.gif
│ │ │ ├── video-play.png
│ │ │ ├── vimeo-play.png
│ │ │ └── youtube-play.png
│ │ ├── js
│ │ │ ├── lightgallery.js
│ │ │ ├── lightgallery.min.js
│ │ │ └── plugins
│ │ │ ├── lg-autoplay.min.js
│ │ │ ├── lg-fullscreen.min.js
│ │ │ └── lg-video.min.js
│ │ └── sass
│ │ ├── lg-animations.scss
│ │ ├── lg-autoplay.scss
│ │ ├── lg-fb-comment-box.scss
│ │ ├── lg-fonts.scss
│ │ ├── lg-fullscreen.scss
│ │ ├── lg-mixins.scss
│ │ ├── lg-pager.scss
│ │ ├── lg-share.scss
│ │ ├── lg-theme-default.scss
│ │ ├── lg-thumbnail.scss
│ │ ├── lg-transitions.scss
│ │ ├── lg-variables.scss
│ │ ├── lg-video.scss
│ │ ├── lg-zoom.scss
│ │ ├── lightgallery.scss
│ │ └── prepros.cfg
│ └── app.js
├── sass
│ ├── _base.scss
│ ├── app.scss
│ ├── _fonts.scss
│ └── lightgallery.scss
└── stylesheets
├── app.css
└── lightgallery.css
/sass/lightgallery.scss file
@import "../javascripts/components/lightgallery/sass/lg-variables";
@import "../javascripts/components/lightgallery/sass/lg-mixins";
@import "../javascripts/components/lightgallery/sass/lg-fonts";
@import "../javascripts/components/lightgallery/sass/lg-theme-default";
@import "../javascripts/components/lightgallery/sass/lg-video";
@import "../javascripts/components/lightgallery/sass/lg-autoplay";
@import "../javascripts/components/lightgallery/sass/lg-fullscreen";
$backdrop-opacity: .02;
@import "../javascripts/components/lightgallery/sass/lightgallery";
Regardless of what variable I add after $backdrop-opacity like $lg-toolbar-bg: rgba(12, 255, 0, 0.45); doesn't change its value from the default $lg-toolbar-bg: rgba(0, 0, 0, 0.45) !default;
Am I making a mistake in the @import order? I kind of clueless.
I order to make this post short here are the links to src/sass/lightgallery.scss and src/sass/lg-variables.scss on github
thanks
Your variable $backdrop-opacity isn't declared again in https://github.com/sachinchoolur/lightgallery.js/blob/master/src/sass/lightgallery.scss You set it once, it's used once.