From fe7933869e3e3f3da49d5df200d33f816bc88f50 Mon Sep 17 00:00:00 2001 From: Tom Willemse Date: Thu, 27 Jul 2023 00:57:24 -0700 Subject: [PATCH] Switch from less to scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 + literate-build.org | 19 ++++++++-------- src/less/include/colors.less | 9 -------- src/{less/cgit.less => scss/cgit.scss} | 18 +++++++-------- src/scss/include/_colors.scss | 9 ++++++++ .../common.less => scss/include/_common.scss} | 20 ++++++++--------- .../include/_components.scss} | 10 ++++----- .../yoshi.css => scss/include/_yoshi.scss} | 0 src/{less/main.less => scss/main.scss} | 20 ++++++++--------- src/{less/tekuti.less => scss/tekuti.scss} | 22 +++++++++---------- 10 files changed, 65 insertions(+), 63 deletions(-) delete mode 100644 src/less/include/colors.less rename src/{less/cgit.less => scss/cgit.scss} (83%) create mode 100644 src/scss/include/_colors.scss rename src/{less/include/common.less => scss/include/_common.scss} (80%) rename src/{less/include/components.less => scss/include/_components.scss} (85%) rename src/{less/yoshi.css => scss/include/_yoshi.scss} (100%) rename src/{less/main.less => scss/main.scss} (73%) rename src/{less/tekuti.less => scss/tekuti.scss} (82%) 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; }