Feat: change css to scss

Author: gitgitWi

pages/_app.tsx

@@ -1,13 +1,6 @@
-import { FunctionComponent } from "react";
-import "../styles/globals.css";
+import { AppProps } from "next/app";
+import "../styles/globals.scss";
 
-interface MyAppProps {
-  Component: FunctionComponent;
-  pageProps: any;
-}
-
-function MyApp({ Component, pageProps }: MyAppProps) {
+export default function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
 }
-
-export default MyApp;

styles/Home.module.css

@@ -0,0 +1,4 @@
+// --- Colors
+// @see {https://www.w3schools.com/colors/colors_2021.asp}
+$Black-Inkwell: rgb(54, 57, 69);
+$Gray-UltimateGray: rgb(147, 149, 151);

styles/_variables.scss

@@ -0,0 +1,27 @@
+@import "variables";
+
+.reset {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.center {
+  width: 100%;
+  display: grid;
+  place-content: center;
+}
+
+html,
+body {
+  @extend .reset;
+  @extend .center;
+
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
+    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}