feat: deprecate sass, convert to css (#1531)

docs/.vuepress/components/CssVariables.vue

@@ -0,0 +1,31 @@
+<template>
+  <div style="background: #282c34; padding: 1rem; border-radius: 0.3rem">
+    <v-select :options="countries" />
+  </div>
+</template>
+
+<script>
+import countries from '../data/countries.js'
+export default {
+  data: () => ({ countries }),
+}
+</script>
+
+<style scoped>
+>>> {
+  --vs-controls-color: #664cc3;
+  --vs-border-color: #664cc3;
+
+  --vs-dropdown-bg: #282c34;
+  --vs-dropdown-color: #cc99cd;
+  --vs-dropdown-option-color: #cc99cd;
+
+  --vs-selected-bg: #664cc3;
+  --vs-selected-color: #eeeeee;
+
+  --vs-search-input-color: #eeeeee;
+
+  --vs-dropdown-option--active-bg: #664cc3;
+  --vs-dropdown-option--active-color: #eeeeee;
+}
+</style>

docs/guide/css.md

@@ -1,17 +1,47 @@
-Vue Select offers many APIs for customizing the look and feel from the component. You can use 
-[scoped slots](../api/slots.md), [custom child components](components.md), or modify the built in 
-SCSS variables. 
+Vue Select offers many APIs for customizing the look and feel from the component. You can use
+[scoped slots](../api/slots.md), [custom child components](components.md), or modify the built in
+CSS properties.
 
-::: tip
-Support for CSS variables (custom properties) is currently on the road map for those
-that are not using sass in their projects. 
-::: 
+## CSS Variables
 
-## SCSS Variables
+Vue Select uses custom CSS properties throughout the component to handle visual opinions. This
+allows for quite a bit of flexibility in styling, without having to hook into a build system for
+generating your own styles with something like SASS. If there is a value that you think should use a
+CSS property instead of a hardcoded CSS value, please submit a PR.
+
+## Dark Mode Example
+
+Without writing any CSS yourself, you can completely customize the look and feel of Vue Select
+through the use of CSS variables. In this example, we adjust the colors of the component to match
+for a dark mode application.
+
+In this case, the variables are scoped to only this implementation of the component, but you could
+place these variables anywhere in your applications CSS file to implement at a global level for your
+app.
+
+Check the MDN docs for more info
+about [CSS Custom Properties.](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+
+<CssVariables style="margin-top: 1rem;" />
+
+<<< @/.vuepress/components/CssVariables.vue
+
+### Available CSS Variables <Badge type="primary">3.18+</Badge>
+
+<<< @/../src/css/global/variables.css
+
+## SCSS <Badge type="warning">Deprecated in v3.18</Badge>
+
+::: warning Deprecation Notice 
+The SCSS build been deprecated for the `v3.x` release, and will be
+removed in `v4.0.0`. The files will remain in the v3 codebase if you really need them, but the
+recommended approach is to leverage the included CSS variables instead.
+:::
 
 Variables are leveraged in as much of the component styles as possible. If you really want to dig
 into the SCSS, the files are located in `src/scss`. The variables listed below can be found at
-[`src/scss/global/_variables`](https://github.com/sagalbot/vue-select/blob/master/src/scss/global/_variables.scss).
+[`src/scss/global/_variables`](https://github.com/sagalbot/vue-select/blob/master/src/scss/global/_variables.scss)
+.
 
 All variables are implemented with `!default` in order to make them easier to override in your
 application.
@@ -23,12 +53,12 @@ application.
 Vue Select takes the approach of using selectors with a single level of specificity, while using
 classes that are very specific to Vue Select to avoid collisions with your app.
 
-All classes within Vue Select use the `vs__` prefix, and selectors are generally a single classname 
+Most classes within Vue Select use the `vs__` prefix, and selectors are generally a single classname
 – unless there is a state being applied to the component.
 
-In order to override a default property in your app, you should add one level of specificity. 
-The easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust
-all instances of Vue Select, or add your own classname if you just want to affect one.
+In order to override a default property in your app, you should add one level of specificity. The
+easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust all
+instances of Vue Select, or add your own classname if you just want to affect one.
 
 <CssSpecificity />  
 
@@ -38,17 +68,18 @@ all instances of Vue Select, or add your own classname if you just want to affec
 
 By default, the dropdown transitions with a `.15s` cubic-bezier opacity fade in/out. The component
 uses the [VueJS transition system](https://vuejs.org/v2/guide/transitions.html). By default, the
- transition name is `vs__fade`. There's a couple ways to override or change this transition.
+transition name is `vs__fade`. There's a couple ways to override or change this transition.
 
 1. Use the `transition` prop. Applying this prop will change the name of the animation classes and
-negate the default CSS. If you want to remove it entirely, you can set it to an empty string.
+   negate the default CSS. If you want to remove it entirely, you can set it to an empty string.
 
 ```html
+
 <v-select transition="" />
 ```
 
-2. You can also override the default CSS for the `vs__fade` transition. Again, if you 
-wanted to eliminate the transition entirely:
+2. You can also override the default CSS for the `vs__fade` transition. Again, if you wanted to
+   eliminate the transition entirely:
 
 ```css
 .vs__fade-enter-active,

docs/guide/install.md

@@ -1,8 +1,14 @@
 ## Yarn / NPM
-Install with yarn:
+
+Install with yarn or npm:
+
 ```bash
+# vue 2
 yarn add vue-select
 
+# vue 3
+yarn add vue-select@beta
+
 # or, using NPM
 npm install vue-select
 ```
@@ -22,12 +28,6 @@ The component itself does not include any CSS. You'll need to include it separat
 import 'vue-select/dist/vue-select.css';
 ```
 
-Alternatively, you can import the scss for complete control of the component styles:
-
-```scss
-@import "vue-select/src/scss/vue-select.scss";
-```
-
 ## In the Browser
 
 vue-select ships as an UMD module that is accessible in the browser. When loaded
@@ -56,5 +56,5 @@ Vue.component('v-select', VueSelect.VueSelect);
 
 ## Vue Compatibility
 
-- If you're on Vue `1.x`, use vue-select `1.x`. 
-- The `1.x` branch has not received updates since the 2.0 release.  
+- Vue `2.x`, use vue-select `3.x`. 
+- Vue `3.x`, use vue-select `3.x@beta`.  

docs/package.json

@@ -22,9 +22,7 @@
     "dotenv": "^8.2.0",
     "fuse.js": "^6.4.0",
     "gh-pages": "^2.2.0",
-    "node-sass": "^4.12.0",
     "octonode": "^0.9.5",
-    "sass-loader": "^8.0.2",
     "vue": "^2.6.10",
     "vuepress": "^1.4.0",
     "vuex": "^3.1.0"