Switch from less to scss

Trying to redo the way I build my site so that it's simpler to maintain, and one
thing that was getting in my way was that ‘lessc’ isn't packaged for Guix. Sass
on the other hand is, so I've switched.

.gitignore

@@ -1,5 +1,6 @@
 /.cask
 /.org-timestamps
+/.sass-cache
 
 # Built files
 /public

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/scss/include/_common.scss \
-    src/less/include/components.less \
+    src/scss/include/_components.scss \
-    src/less/include/colors.less \
+    src/scss/include/_colors.scss \
-    src/less/yoshi.css
+    src/scss/include/_yoshi.scss
 
-public/assets/css/%.css: src/less/%.less
+public/assets/css/%.css: src/scss/%.scss
-	lessc $< $@
+	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.

src/less/include/colors.less

@@ -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;

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;
 }

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;

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;
+    background-color: $dark-background;
-    color: @dark-foreground;
+    color: $dark-foreground;
   }
 
   @media (prefers-color-scheme: light) {
-    background-color: @light-background;
+    background-color: $light-background;
-    color: @light-foreground;
+    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;
   }
 }
 

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;
   }
 }

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 .footer;
-  &:extend(.content-wrapper);
+  @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;
     }
   }
 }

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;
+    background-color: $dark-background;
-    color: @dark-foreground;
+    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;
+    background-color: $light-background;
-    color: @light-foreground;
+    color: $light-foreground;
   }
 }
 
@@ -65,13 +65,13 @@ p.footpara {
 }
 
 #footer {
-  &:extend(.footer);
+  @extend .footer;
-  &:extend(.footer-text);
+  @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;
 }