diff --git a/.gitignore b/.gitignore
index 28ed9d7..8c7ee58 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 /.cask
 /.org-timestamps
+/.sass-cache
 
 # Built files
 /public
diff --git a/literate-build.org b/literate-build.org
index 4cea360..473c9c6 100644
--- a/literate-build.org
+++ b/literate-build.org
@@ -57,19 +57,20 @@ html: Eldev
 	eldev emacs --quick --batch --load publish.el --funcall org-publish-all
 #+end_src
 
-The =css= target does specify its dependencies. This is both an exercise in writing make files (which I generally quite enjoy), and also to make sure that my builds don't take too long unless they actually have to. Ultimately any =.css= file gets created from a =.less= file by calling the =lessc= program. I'm intentionally not using recursive make in this project because it slows make down a lot, and I don't have to manage several make files this way.
+The =css= target does specify its dependencies. This is both an exercise in writing make files (which I generally quite enjoy), and also to make sure that my builds don't take too long unless they actually have to. Ultimately any =.css= file gets created from a =.scss= file by calling the =scss= program. I'm intentionally not using recursive make in this project because it slows make down a lot, and I don't have to manage several make files this way.
 
 #+begin_src makefile-gmake
 css: public/assets/css/main.css public/assets/css/tekuti.css public/assets/css/cgit.css
 
 public/assets/css/main.css public/assets/css/tekuti.css public/assets/css/cgit.css: \
-    src/less/include/common.less \
-    src/less/include/components.less \
-    src/less/include/colors.less \
-    src/less/yoshi.css
+    src/scss/include/_common.scss \
+    src/scss/include/_components.scss \
+    src/scss/include/_colors.scss \
+    src/scss/include/_yoshi.scss
 
-public/assets/css/%.css: src/less/%.less
-	lessc $< $@
+public/assets/css/%.css: src/scss/%.scss
+	mkdir -p $$(dirname $@)
+	scss $< $@
 #+end_src
 
 The =deploy= target first makes sure that =build= has been executed at least once and then uses =rsync= to upload all of the files. This intentionally doesn't depend on the =build= target so that I can upload whatever I happen to have generated without being forced to rebuild.
@@ -100,7 +101,7 @@ serve:						   ## Run a simple web server to look at the results
 	@cd public && php -S "localhost:8000"
 #+end_src
 
-The =theme= target is another convenience target. I generate the colors for the source code blocks on my site from my Emacs theme. This target exports the colors from my theme so that the code blocks can use them. This file is then included by the less files. There is no good dependency here, because there is no file for the export of my theme to depend on right now, just occasionally I have to run it. It does depend on the =Eldev= file having been generated.
+The =theme= target is another convenience target. I generate the colors for the source code blocks on my site from my Emacs theme. This target exports the colors from my theme so that the code blocks can use them. This file is then included by the scss files. There is no good dependency here, because there is no file for the export of my theme to depend on right now, just occasionally I have to run it. It does depend on the =Eldev= file having been generated.
 
 #+begin_note
 I keep this particular target around for playing with, but right now it doesn't actually work. Just because even though I load and enable =yoshi-theme= it doesn't appear to apply the theme in a batch session. Seems understandable because no UI actually gets loaded, but that does mean that it can't figure out which faces it sets and it just outputs the colors for the default theme.
@@ -122,7 +123,7 @@ theme: Eldev					## Generate the theme CSS
 	    -eval "(kill-whole-line)" \
 	    -eval "(css-mode)" \
 	    -eval "(indent-region (point-min) (point-max))" \
-	    -eval '(write-file "src/less/yoshi.css")'
+	    -eval '(write-file "src/scss/include/_yoshi.scss")'
 #+end_src
 
 Finally, as a precaution, I specify that all of the main targets are phony targets. This way if I ever introduce any file with the same name as these targets they will still build and not assume that because the file exists, everything is up-to-date.
diff --git a/src/less/include/colors.less b/src/less/include/colors.less
deleted file mode 100644
index c67745a..0000000
--- a/src/less/include/colors.less
+++ /dev/null
@@ -1,9 +0,0 @@
-@dark-background: #222424;
-@dark-background-highlight: #3f4242;
-@dark-foreground: #bfbfbf;
-@dark-primary: #ff9800;
-
-@light-background: #f2f2f2;
-@light-background-highlight: #d9d9d9;
-@light-foreground: #111414;
-@light-primary: #1d44b8;
diff --git a/src/less/cgit.less b/src/scss/cgit.scss
similarity index 83%
rename from src/less/cgit.less
rename to src/scss/cgit.scss
index c8113b3..70b9dfa 100644
--- a/src/less/cgit.less
+++ b/src/scss/cgit.scss
@@ -14,12 +14,12 @@ a.button {
   display: inline-block;
   padding: 0 5px;
   background-color: #1e2f47;
-  color: @dark-foreground;
+  color: $dark-foreground;
 
   &:hover {
     text-decoration: none;
     background-color: #71a3f0;
-    color: @dark-background;
+    color: $dark-background;
   }
 }
 
@@ -29,10 +29,10 @@ a.button {
 
 .highlight {
   @media (prefers-color-scheme: dark) {
-    background-color: @dark-background !important;
+    background-color: $dark-background !important;
   }
   @media (prefers-color-scheme: light) {
-    background-color: @light-background !important;
+    background-color: $light-background !important;
   }
 
   .nv {
@@ -62,7 +62,7 @@ a.button {
 }
 
 .main {
-  &:extend(.title-header);
+  @extend .title-header;
 
   display: block;
 }
@@ -89,7 +89,7 @@ a.button {
 }
 
 .pager {
-  .listless-list();
+  @include listless-list;
 
   margin: 0;
   padding: 0;
@@ -108,7 +108,7 @@ a.button {
 }
 
 .sub {
-  &:extend(.subtitle);
+  @extend .subtitle;
 
   display: block;
 }
@@ -121,7 +121,7 @@ a.button {
     margin: 0;
 
     &.active {
-      background-color: @dark-background-highlight;
+      background-color: $dark-background-highlight;
     }
   }
 
@@ -132,7 +132,7 @@ a.button {
 }
 
 #cgit {
-  &:extend(.content-wrapper);
+  @extend .content-wrapper;
 
   position: relative;
 }
diff --git a/src/scss/include/_colors.scss b/src/scss/include/_colors.scss
new file mode 100644
index 0000000..6e53934
--- /dev/null
+++ b/src/scss/include/_colors.scss
@@ -0,0 +1,9 @@
+$dark-background: #222424;
+$dark-background-highlight: #3f4242;
+$dark-foreground: #bfbfbf;
+$dark-primary: #ff9800;
+
+$light-background: #f2f2f2;
+$light-background-highlight: #d9d9d9;
+$light-foreground: #111414;
+$light-primary: #1d44b8;
diff --git a/src/less/include/common.less b/src/scss/include/_common.scss
similarity index 80%
rename from src/less/include/common.less
rename to src/scss/include/_common.scss
index 512ede7..549ef55 100644
--- a/src/less/include/common.less
+++ b/src/scss/include/_common.scss
@@ -12,18 +12,18 @@ a {
   text-decoration: underline;
 
   @media (prefers-color-scheme: dark) {
-    color: @dark-primary;
+    color: $dark-primary;
 
     &:visited {
-      color: darken(@dark-primary, 10%);
+      color: darken($dark-primary, 10%);
     }
   }
 
   @media (prefers-color-scheme: light) {
-    color: @light-primary;
+    color: $light-primary;
 
     &:visited {
-      color: darken(@light-primary, 10%);
+      color: darken($light-primary, 10%);
     }
   }
 
@@ -46,13 +46,13 @@ body {
   margin-top: 0;
 
   @media (prefers-color-scheme: dark) {
-    background-color: @dark-background;
-    color: @dark-foreground;
+    background-color: $dark-background;
+    color: $dark-foreground;
   }
 
   @media (prefers-color-scheme: light) {
-    background-color: @light-background;
-    color: @light-foreground;
+    background-color: $light-background;
+    color: $light-foreground;
   }
 }
 
@@ -74,11 +74,11 @@ h2 {
   border-bottom-style: solid;
 
   @media (prefers-color-scheme: dark) {
-    border-bottom-color: @dark-foreground;
+    border-bottom-color: $dark-foreground;
   }
 
   @media (prefers-color-scheme: light) {
-    border-bottom-color: @light-foreground;
+    border-bottom-color: $light-foreground;
   }
 }
 
diff --git a/src/less/include/components.less b/src/scss/include/_components.scss
similarity index 85%
rename from src/less/include/components.less
rename to src/scss/include/_components.scss
index 78ff371..0ccdf18 100644
--- a/src/less/include/components.less
+++ b/src/scss/include/_components.scss
@@ -16,11 +16,11 @@ pre.src {
   clear: both;
 
   @media (prefers-color-scheme: dark) {
-    border-top: 3px @dark-foreground dotted;
+    border-top: 3px $dark-foreground dotted;
   }
 
   @media (prefers-color-scheme: light) {
-    border-top: 3px @light-foreground dotted;
+    border-top: 3px $light-foreground dotted;
   }
 }
 
@@ -35,7 +35,7 @@ pre.src {
   margin-top: 1rem;
 }
 
-.listless-list {
+@mixin listless-list {
   list-style-type: none;
 
   li {
@@ -81,9 +81,9 @@ pre.src {
   border-bottom-style: solid;
 
   @media (prefers-color-scheme: dark) {
-    border-bottom-color: @dark-foreground;
+    border-bottom-color: $dark-foreground;
   }
   @media (prefers-color-scheme: light) {
-    border-bottom-color: @light-foreground;
+    border-bottom-color: $light-foreground;
   }
 }
diff --git a/src/less/yoshi.css b/src/scss/include/_yoshi.scss
similarity index 100%
rename from src/less/yoshi.css
rename to src/scss/include/_yoshi.scss
diff --git a/src/less/main.less b/src/scss/main.scss
similarity index 73%
rename from src/less/main.less
rename to src/scss/main.scss
index 2149f32..b6e03e3 100644
--- a/src/less/main.less
+++ b/src/scss/main.scss
@@ -11,12 +11,12 @@ img.book-cover {
 }
 
 .title {
-  &:extend(.title-header);
+  @extend .title-header;
   clear: both;
 }
 
 .subtitle {
-  &:extend(.subtitle);
+  @extend .subtitle;
 }
 
 #avatar {
@@ -25,7 +25,7 @@ img.book-cover {
 }
 
 #org-div-home-and-up {
-  &:extend(.content-wrapper);
+  @extend .content-wrapper;
 
   text-align: right;
   font-size: 0.8rem;
@@ -34,16 +34,16 @@ img.book-cover {
 }
 
 #postamble {
-  &:extend(.footer);
-  &:extend(.content-wrapper);
+  @extend .footer;
+  @extend .content-wrapper;
 
   p {
-    &:extend(.footer-text);
+    @extend .footer-text;
   }
 }
 
 #content {
-  &:extend(.content-wrapper);
+  @extend .content-wrapper;
 }
 
 figure {
@@ -51,16 +51,16 @@ figure {
 }
 
 pre.src {
-  @import (less) "yoshi.css";
+  @import "include/yoshi.scss";
 
   position: static;
 
   &::before {
     @media (prefers-color-scheme: dark) {
-      background-color: @dark-background;
+      background-color: $dark-background;
     }
     @media (prefers-color-scheme: light) {
-      background-color: @light-background;
+      background-color: $light-background;
     }
   }
 }
diff --git a/src/less/tekuti.less b/src/scss/tekuti.scss
similarity index 82%
rename from src/less/tekuti.less
rename to src/scss/tekuti.scss
index 75b3a86..16e7489 100644
--- a/src/less/tekuti.less
+++ b/src/scss/tekuti.scss
@@ -4,23 +4,23 @@
 
 @media (prefers-color-scheme: dark) {
   h2.storytitle {
-	border-bottom: 3px dotted @dark-foreground;
+	border-bottom: 3px dotted $dark-foreground;
   }
 
   #menu {
-    background-color: @dark-background;
-    color: @dark-foreground;
+    background-color: $dark-background;
+    color: $dark-foreground;
   }
 }
 
 @media (prefers-color-scheme: light) {
   h2.storytitle {
-	border-bottom: 3px dotted @light-foreground;
+	border-bottom: 3px dotted $light-foreground;
   }
 
   #menu {
-    background-color: @light-background;
-    color: @light-foreground;
+    background-color: $light-background;
+    color: $light-foreground;
   }
 }
 
@@ -65,13 +65,13 @@ p.footpara {
 }
 
 #footer {
-  &:extend(.footer);
-  &:extend(.footer-text);
+  @extend .footer;
+  @extend .footer-text;
   width: 100%;
 }
 
 #header {
-  &:extend(.title-header);
+  @extend .title-header;
 }
 
 #menu {
@@ -136,9 +136,9 @@ p.footpara {
 }
 
 #navbar {
-  &:extend(.subtitle);
+  @extend .subtitle;
 }
 
 #rap {
-  &:extend(.content-wrapper);
+  @extend .content-wrapper;
 }