Add scss

package-lock.json

@@ -21,6 +21,7 @@
 				"eslint-plugin-svelte": "^2.30.0",
 				"prettier": "^2.8.0",
 				"prettier-plugin-svelte": "^2.10.1",
+				"sass": "^1.64.2",
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
 				"tslib": "^2.4.1",
@@ -1830,6 +1831,12 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+			"integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
+			"dev": true
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2644,6 +2651,23 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/sass": {
+			"version": "1.64.2",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.64.2.tgz",
+			"integrity": "sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==",
+			"dev": true,
+			"dependencies": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.5.4",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -4416,6 +4440,12 @@
 			"integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
 			"dev": true
 		},
+		"immutable": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+			"integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
+			"dev": true
+		},
 		"import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4961,6 +4991,17 @@
 				}
 			}
 		},
+		"sass": {
+			"version": "1.64.2",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.64.2.tgz",
+			"integrity": "sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==",
+			"dev": true,
+			"requires": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			}
+		},
 		"semver": {
 			"version": "7.5.4",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",

package.json

@@ -21,6 +21,7 @@
 		"eslint-plugin-svelte": "^2.30.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
+		"sass": "^1.64.2",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"tslib": "^2.4.1",

src/_variables.scss

@@ -0,0 +1,2 @@
+$background-color: #1b1b20;
+$font-family: Verdana, Geneva, Tahoma, sans-serif;

src/app.scss

@@ -1,11 +1,8 @@
-:root {
+@use "variables" as *;
-	--background-color: #1b1b20;
-	--font-family: Verdana, Geneva, Tahoma, sans-serif;
-}
 
- body {
+body {
-	background-color: var(--background-color);
+	background-color: $background-color;
-	font-family: var(--font-family);
+	font-family: $font-family;
 	color: white;
 	margin: 0;
 	padding: 0;
@@ -13,7 +10,7 @@
 
 button {
 	border: none;
-	font-family: var(--font-family);
+	font-family: $font-family;
 	background-color: transparent;
 	color: white;
 }
@@ -24,8 +21,8 @@ button:hover {
 
 a {
 	text-decoration: inherit;
-    color: inherit;
+	color: inherit;
-    cursor: auto;
+	cursor: auto;
 }
 
 a:visited {
@@ -37,4 +34,3 @@ a:visited {
 a:hover {
 	cursor: pointer;
 }
-

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import NavBar from '$lib/components/NavBar.svelte';
 	import Snackbar from '$lib/components/Snackbar.svelte';
-	import '../app.css';
+	import '../app.scss';
 </script>
 
 <NavBar />

svelte.config.js

@@ -1,11 +1,13 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	preprocess: preprocess({
-	// for more information about preprocessors
+		scss: {
-	preprocess: vitePreprocess(),
+			prependData: `@use './src/variables' as *;`
+		}
+	}),
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.