docs(sass-variables): update page content

packages/docs/src/pages/en/features/sass-variables.md

@@ -15,40 +15,77 @@ Vuetify uses **SASS/SCSS** to craft the style and appearance of all aspects of t
 
 <entry />
 
+::: info
+
+It is recommended to familiarize yourself with the [Treeshaking](/features/treeshaking/) guide before continuing.
+
+:::
+
 ## Installation
 
-Vuetify works out of the box without any additional compilers needing to be installed. Changing or using SASS variables though obviously requires the SASS compiler.
+Vuetify works out of the box without any additional compilers needing to be installed but does support advanced use-cases such as modifying the underlying variables of the framework. Vite provides built-in support for sass, less and stylus files without the need to install Vite-specific plugins for them; just the corresponding pre-processor itself.
 
-### vite
+To begin modifying Vuetify's internal variables, install the [sass](https://sass-lang.com/) pre-processor:
 
-Vite provides built-in support for sass, less and stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed. Vuetify needs sass as a preprocessor so install it:
+<DocTabs>
+  <template #tabs>
+    <v-tab value="vite" variant="plain">Vite</v-tab>
+    <v-tab value="vue-cli" variant="plain">Vue CLI</v-tab>
+  </template>
+  <template #content>
+  <v-window-item value="vite">
 
 ```bash
-npm install -D sass
-```
+  # yarn
+  yarn install -D sass
 
-for more information: https://vitejs.dev/guide/features.html#css-pre-processors
+  #npm
+  npm install -D sass
 
-### vue-cli
+  #pnpm
+  pnpm install -D sass
+```
 
-You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, the internal webpack config is still pre-configured to handle all of them. You just need to manually install the corresponding webpack loaders:
+  </v-window-item>
+  <v-window-item value="vue-cli">
 
 ```bash
-npm install -D sass-loader sass
+  # yarn
+  yarn install -D sass-loader sass
+
+  # npm
+  npm install -D sass-loader sass
+
+  #pnpm
+  pnpm install -D sass-loader sass
 ```
 
-for more information: https://cli.vuejs.org/guide/css.html#pre-processors
+  </v-window-item>
+  </template>
+</DocTabs>
+
+For additional details about css-pre-processors, please refer to the official vite page at: https://vitejs.dev/guide/features.html#css-pre-processors or official vue-cli-page at: https://cli.vuejs.org/guide/css.html#pre-processors
 
 ## Basic usage
 
-Some variables are not used by vuetify components and are safe to modify without any additional configuration.
+Create a **main.scss** file in your **src/styles** directory and update the style import within your **vuetify.js** file:
+
+```scss { resource="src/styles/main.scss" }
+@use 'vuetify' with (
+  $variable: false,
+);
+```
 
-```diff { resource="main.js" }
+```diff { resource="src/plugins/vuetify.js" }
 - import 'vuetify/styles'
-+ import './main.scss'
++ import '@/styles/main.scss'
 ```
 
-```scss { resource="main.scss" }
+Within your style file, import the Vuetify styles and specify the variables you want to override, that's it. This is useful when you want to make changes to the global theme or utility classes.
+
+The following example turns off all utility classes and color packs:
+
+```scss { resource="src/styles/main.scss" }
 @use 'vuetify' with (
   $utilities: false,
   $color-pack: false,
@@ -57,32 +94,17 @@ Some variables are not used by vuetify components and are safe to modify without
 
 ::: warning
 
-`'vuetify/styles'` should not be used in sass files as it resolves to precompiled css ([vitejs/vite#7809](https://github.com/vitejs/vite/issues/7809))
-
-`'vuetify'` and `'vuetify/settings'` are valid and safe to use
+`'vuetify/styles'` should not be used in sass files as it resolves to precompiled css ([vitejs/vite#7809](https://github.com/vitejs/vite/issues/7809)). `'vuetify'` and `'vuetify/settings'` are valid and safe to use
 
 :::
 
 ## Component specific variables
 
-Customising variables used in components is a bit more complex and requires the use of a build plugin.
-Follow the plugin setup guide from [treeshaking](/features/treeshaking/) then add `styles.configFile` to the plugin options:
-
-```js
-// Vite/Nuxt
-vuetify({
-  styles: { configFile: 'src/settings.scss' }
-})
-
-// Webpack/Vue CLI
-new VuetifyPlugin({
-  styles: { configFile: 'src/settings.scss' }
-})
-```
+Customising variables used in components is a bit more complex and requires the use of a special build plugin.
 
-And create a settings file. This can be named anything you like, just make sure to reference it in the plugin options.
+Follow the plugin setup guide from [treeshaking](/features/treeshaking/) then add `styles.configFile` to the plugin options:
 
-```scss { resource="settings.scss" }
+```scss { resource="src/styles/settings.scss" }
 @use 'vuetify/settings' with (
   $utilities: false,
   $button-height: 40px,
@@ -93,6 +115,10 @@ And create a settings file. This can be named anything you like, just make sure
 If you were using the basic technique from above, make sure to remove it and switch back to `import 'vuetify/styles'`.
 You can keep `main.scss` for other style overrides but don't do both or you'll end up with duplicated styles.
 
+Available SASS variables are located on each component's API page.
+
+![image](https://github.com/vuetifyjs/vuetify/assets/9064066/967da002-5a9e-4bce-8285-1fa9b849e36d "VBtn SASS Variables")
+
 <!--
 ## Variable API
 
@@ -109,7 +135,7 @@ There are many SASS/SCSS variables that can be customized across the entire Vuet
 
 You can access [global](/api/vuetify/) and per-component variables in Vue templates simply by importing the settings file:
 
-```html { resource="component.vue" }
+```html { resource="Comp1.vue" }
 <style lang="scss">
   @use './settings';
 
@@ -121,7 +147,7 @@ You can access [global](/api/vuetify/) and per-component variables in Vue templa
 
 Keep in mind that to obtain settings from Vuetify, you must forward its variables from within your local stylesheet. In the following example we modify `settings.scss` to **forward** instead of **use**:
 
-```diff { resource="settings.scss" }
+```diff { resource="src/styles/settings.scss" }
 - @use 'vuetify/settings' with (
 + @forward 'vuetify/settings' with (
 ```