docs: update docs with SASS @use info

docs/getting-started/quick-start.md

@@ -31,12 +31,10 @@ import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.cs
 You could also compile the SASS files with your own customization, for that simply take any of the [_variables.scss](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) (without the `!default` flag) variable from the file and make sure to import the Bootstrap Theme afterward. For example, you could modify your `style.scss` with the following changes:
 
 ```scss
-/* for example, let's change the mouse hover color */
-$cell-odd-background-color: lightyellow;
-$row-mouse-hover-color: lightgreen;
-
-/* make sure to add the @use the SlickGrid Bootstrap Theme AFTER the variables changes */
-@use '../node_modules/@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '../node_modules/@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $cell-odd-background-color: lightyellow,
+  $row-mouse-hover-color: lightgreen
+);
 ```
 
 ### 3. Include it in your App

docs/styling/styling.md

@@ -37,13 +37,12 @@ The Material & Salesforce Themes are using SVGs internally for the icons used by
 
 ##### with SASS
 ```scss
-/* change any SASS variables before loading the theme */
-$slick-primary-color: green;
-$slick-cell-odd-background-color: lightyellow;
-$slick-row-mouse-hover-color: lightgreen;
-
 /* style.scss */
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-primary-color: green,
+  $slick-cell-odd-background-color: lightyellow,
+  $slick-row-mouse-hover-color: lightgreen
+);
 
 // or other Themes
 // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
@@ -71,14 +70,13 @@ You could use Custom SVGs and create your own Theme and/or a different set of SV
 
 ##### with SVG
 ```scss
-$slick-primary-color: blue;
-$slick-icon-group-color: $slick-primary-color;
-$slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
-$slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
-$slick-icon-group-font-size:   13px;
-
-// then on the last line, load the Theme that you wish to override
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-primary-color: blue,
+  $slick-icon-group-color: $slick-primary-color,
+  $slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
+  $slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
+  $slick-icon-group-font-size:   13px
+);
 ```
 
 > **Note** since the SVG are generated by a SASS function, you can easily override an SVG path in SASS but that is not the case with CSS variable. We still have a way to override an SVG via CSS variable but it requires to override the entire SVG content (not just its path) as can be seen below (also notice that the CSS variable is named without the `"-path"` suffix and also note that the URL must be encoded)