diff --git a/README.md b/README.md
index 19af996..12a93d9 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,7 @@ There are many improvements big and small over front-cover, making *Fuse Core* a
 - Ability to show extra HTML below the links, for any crisp statement that you deem necessary to add.
 - Use of Bootstrap for responsive design. This gives us supreme browser compatibility and ease of maintenance,
   because a myriad of problems are already handled by the folks at Bootstrap.
+- [SASS](https://sass-lang.com/) styling instead of raw CSS
 - Up-to-date libraries, especially Font Awesome 5.
 - Support for [Google Analytics ](https://analytics.google.com/analytics/web/), including some legal details
   such as IP anonymization and cookie consent popup (all optional).
diff --git a/_config.yml b/_config.yml
index 8294f7d..18f7e12 100644
--- a/_config.yml
+++ b/_config.yml
@@ -4,6 +4,8 @@
 markdown: kramdown
 permalink: pretty
 exclude: ['README.*', 'LICENSE.txt']
+sass:
+    style: expanded
 
 
 # CAUTION
diff --git a/css/theme.css b/css/theme.css
deleted file mode 100644
index 7abba16..0000000
--- a/css/theme.css
+++ /dev/null
@@ -1,134 +0,0 @@
-/* ========= Fuse Core Jekyll Theme ============================================================ */
-
-html, body {
-    font-family: 'Open Sans',Arial,Helvetica,sans-serif;
-}
-html {
-    position: relative;
-    min-height: 100%;
-}
-body {
-    margin-bottom: 44px;  /* footer height */
-}
-
-.fullscreen-background {
-    background: url("../images/background.jpg") no-repeat center center fixed; 
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-}
-
-div.glass-pane {
-    background-color: rgba(0, 0, 0, 0.5);
-    width: 100%;
-    min-height: 42vh;  /* always cover at least the sky */
-}
-
-div.fuse-core-content {
-    color: white;
-}
-
-
-/* --------- Avatar ---------------------------------------------------------------------------- */
-
-#avatar {
-    height: 180px;
-    border-radius: 100%;
-    border: 5px solid white;
-}
-
-
-/* --------- Title / Subtitle ------------------------------------------------------------------ */
-
-h1 {
-    letter-spacing: 0.1em;
-    font-size: 3em;
-}
-@media (max-width: 575.98px) {  /* bootstrap 'xs' */
-    h1 {
-        letter-spacing: 0;
-    }
-}
-h3 {
-    font-size: 1.2em;
-}
-
-
-/* --------- The Main Links -------------------------------------------------------------------- */
-
-div.row.links > div {
-    white-space: nowrap;
-    padding: 0;
-}
-div.row.links a > i {
-    display: inline-block;
-    margin: 16px 12px;
-}
-div.row.links a > span {
-    margin-right: 15px;
-}
-div.row.links a {
-    color: white;
-    border-radius: 100%;
-    border: 2px solid white;
-    display: inline-block;
-    font-size: 1.8em;
-    line-height: 1em;
-    overflow: hidden;
-}
-div.row.links a:hover {
-    text-decoration: none;
-    -webkit-transition: 300ms;
-    -moz-transition: 300ms;
-    transition: 300ms;
-    background-color: rgba(0, 0, 0, 0.5);
-}
-
-@media (max-width: 575.98px) {  /* bootstrap 'xs' */
-    div.row.links a {
-        border-radius: 10px;
-        width: 100%;
-    }
-}
-
-
-/* --------- Extra HTML ------------------------------------------------------------------------ */
-
-.fuse-core-extra {
-    color: rgba(255, 255, 255, 0.7);
-}
-.fuse-core-extra a {
-    color: rgba(255, 255, 255, 0.9);
-    border-radius: 3px;
-    padding: 0 2px;
-}
-.fuse-core-extra a:hover {
-    color: white;
-    text-decoration: none;
-    background-color: rgba(0, 0, 0, 0.6);
-}
-
-
-/* --------- Footer ---------------------------------------------------------------------------- */
-
-footer {
-    position: absolute;
-    bottom: 0;
-    height: 44px;
-    line-height: 24px;
-    padding: 10px 0;
-    width: 100%;
-    font-size: smaller;
-    color: rgba(255, 255, 255, 0.4);
-}
-footer .col {
-    padding: 0;
-}
-footer a {
-    color: rgba(255, 255, 255, 0.6);
-}
-footer a:hover {
-    text-decoration: none;
-    color: white;
-}
diff --git a/css/theme.scss b/css/theme.scss
new file mode 100644
index 0000000..71e69b5
--- /dev/null
+++ b/css/theme.scss
@@ -0,0 +1,140 @@
+---
+# ========= Fuse Core Jekyll Theme ============================================================== #
+---
+
+$fc-footer-height: 44px;
+
+html, body {
+    font-family: 'Open Sans',Arial,Helvetica,sans-serif;
+}
+html {
+    position: relative;
+    min-height: 100%;
+}
+body {
+    margin-bottom: $fc-footer-height;
+}
+
+.fullscreen-background {
+    background: url("../images/background.jpg") no-repeat center center fixed; 
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+
+div.glass-pane {
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    min-height: 42vh;  /* always cover at least the sky */
+}
+
+div.fuse-core-content {
+    color: white;
+}
+
+
+/* --------- Avatar ---------------------------------------------------------------------------- */
+
+#avatar {
+    height: 180px;
+    border-radius: 100%;
+    border: 5px solid white;
+}
+
+
+/* --------- Title / Subtitle ------------------------------------------------------------------ */
+
+h1 {
+    letter-spacing: 0.1em;
+    @media (max-width: 575.98px) {  /* used on bootstrap size 'xs' */
+        letter-spacing: 0;
+    }
+    font-size: 3em;
+}
+h3 {
+    font-size: 1.2em;
+}
+
+
+/* --------- The Main Links -------------------------------------------------------------------- */
+
+div.row.links {
+    > div {
+        white-space: nowrap;
+        padding: 0;
+    }
+    a {
+        color: white;
+        border-radius: 100%;
+        border: 2px solid white;
+        display: inline-block;
+        font-size: 1.8em;
+        line-height: 1em;
+        overflow: hidden;
+        @media (max-width: 575.98px) {  /* used on bootstrap size 'xs' */
+            border-radius: 10px;
+            width: 100%;
+        }
+
+        &:hover {
+            text-decoration: none;
+            -webkit-transition: 300ms;
+            -moz-transition: 300ms;
+            transition: 300ms;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+
+        > i {
+            display: inline-block;
+            margin: 16px 12px;
+        }
+        > span {
+            margin-right: 15px;
+        }
+    }
+}
+
+
+/* --------- Extra HTML ------------------------------------------------------------------------ */
+
+.fuse-core-extra {
+    color: rgba(255, 255, 255, 0.7);
+
+    a {
+        color: rgba(255, 255, 255, 0.9);
+        border-radius: 3px;
+        padding: 0 2px;
+
+        &:hover {
+            color: white;
+            text-decoration: none;
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+    }
+}
+
+
+/* --------- Footer ---------------------------------------------------------------------------- */
+
+footer {
+    position: absolute;
+    bottom: 0;
+    height: $fc-footer-height;
+    line-height: $fc-footer-height - 2 * 10px;
+    padding: 10px 0;
+    width: 100%;
+    font-size: smaller;
+    color: rgba(255, 255, 255, 0.4);
+
+    .col {
+        padding: 0;
+    }
+    a {
+        color: rgba(255, 255, 255, 0.6);
+        &:hover {
+            text-decoration: none;
+            color: white;
+        }
+    }
+}