Move all scss @import to @use/@forward

[joeworkman]

This update migrates all sass to the new @use/@forward from the deprecated @import. It also uses the sass:list module for various functions. I have verified that this build generates the same exact CSS as v2.8.2.

I would consider this a breaking change. With some simple setups that do not override SCSS variables, existing setups might work. However, here is an example of my test setup that I needed to get this version working.

This first line is important so that the variables can be overwritten before you load in lightgallery and plugins.

@use 'lg-variables' as *;

$backdrop-opacity: 1;
$lg-toolbar-bg: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.4)
);
$lg-border-radius-base: 2px;
$lg-theme-highlight: rgb(169, 7, 7);
$lg-theme-color: #000;

// basic icon colours
$lg-icon-bg: rgba(0, 0, 0, 0.45);
$lg-icon-color: #999;
$lg-icon-hover-color: #fff;

// counter
$lg-counter-color: #e6e6e6;
$lg-counter-font-size: 16px;

// Next prev icons
$lg-next-prev-bg: $lg-icon-bg;
$lg-next-prev-color: $lg-icon-color;
$lg-next-prev-hover-color: $lg-icon-hover-color;

// toolbar icons
$lg-toolbar-icon-color: $lg-icon-color;
$lg-toolbar-icon-hover-color: $lg-icon-hover-color;
$lg-toolbar-icon-disabled-opacity: 0.75;

// autoplay progress bar
$lg-progress-bar-bg: #333;
$lg-progress-bar-active-bg: $lg-theme-highlight;
$lg-progress-bar-height: 5px;

// paths
$lg-path-fonts: 'gallery';
$lg-path-images: 'gallery';

// Zoom plugin
$zoom-transition-duration: 0.5s;

// Sub html - titile
$lg-sub-html-bg: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.6)
);
$lg-sub-html-color: #eee;

// thumbnail toggle button
$lg-thumb-toggle-bg: #0d0a0a;
$lg-thumb-toggle-color: $lg-icon-color;
$lg-thumb-bg: #0d0a0a;
$lg-thumb-container-height: 100px;

// Pager

// z-index
$zindex-outer: 1050;
$zindex-progressbar: 1083;
$zindex-controls: 1084;
$zindex-toolbar: 1082;
$zindex-subhtml: 1080;
$zindex-components: 1080;
$zindex-pager: 1080;
$zindex-playbutton: 1080;
$zindex-item: 1060;
$zindex-backdrop: 1040;

@use "lightgallery";

@use "lg-autoplay";
@use "lg-fullscreen";
// @use "lg-medium-zoom";
@use "lg-pager";
@use "lg-thumbnail";
@use "lg-transitions";
@use "lg-zoom";
// @use "lg-comments";
// @use "lg-relative-caption";
// @use "lg-rotate";
// @use "lg-share";
// @use "lg-video";

Fixes #1677
Fixes #1647

[CLAassistant]

All committers have signed the CLA.

[eat-sleep-code]

@sachinchoolur and @joeworkman when will this be merged?