Mixing and Matching CSS Snippets with SASS

[death.au]

I’ve been building up a small library of little css snippets like Andy Matuschak mode - V2.7 (updated for 0.7+ new panes), "Naked" Embeds (CSS tweak) and others. Often these snippets are theme-independent and can be dropped into other themes.
Rather than continuously copy-paste these snippets when trying new themes, I knocked myself up a little process using SASS to mix and match these snippets and put them into others’ themes for me.

I thought I’d share that process here. (Note, if you want to try this yourself, first install SASS on the command line)

1. Firstly, I created myself a .themes folder in the root of my Obsidian vault (it begins with a dot so it doesn’t show up in obsidian).
2. Inside that folder I create a subfolder called mixins which will contain the css snippets I wish to ‘mix in’ to my themes. I put each in a separate css file (andy-matuschak-v2.css, naked-embeds.css, collapsing-sidebars.css, etc)
3. I create my .themes/obsidian.scss file, which will be used to compile everything together:

@use '../obsidian.css'; // the theme I'm using
@use 'mixins/andy-matuschak-v2'; // Andy Matuschak mode
@use 'mixins/naked-embeds'; // Make embeds blend in with the rest of the content
@use 'mixins/collapsing-sidebars'; // collapsible sidebars
@use 'mixins/editor'; // show whitespace / line breaks

4. Now, all that’s left is to compile the obsidian.scss file with SASS as follows:
   From the vault root directory: sass ./.themes/obsidian.scss ./obsidian.css

That’s it! Your mixins will be added to the bottom of the obsidian.css and your changes should be visible within moments.
Just be aware that if you try and compile the scss file again, it will use your current obsidian.css file which already has your mixins in it. Before compiling again, you might want to re-apply whichever theme you are using so that the mixins get wiped before re-compiling.

[death.au]

I’ve updated the above with clearer instructions (instead of my confusing gist that I never updated). This new method utilises your existing obsidian.css so works with community themes - just be aware that compiling multiple times might include the css mixins multiple times. You can always re-apply a community theme to get around that.

[Klaas]

Many thanks for this smart bit of automation.

Your updated instructions are better. I looked at the older version and walked away. This time, with the renewed instructions, I felt a bit more confident.

I am on macOS, and folder names starting with a dot are not allowed - are only for system folders. So I just named the folder themes to be able to the test, which went fine. Is there another way to not have themes show up in Obs? I tried *themes but that does show up.

[death.au]

The only way I know of for sure is having a dot at the start.
Alternately, you could put your themes folder outside your vault entirely and just update the path in the command.

For example, if you put the snippets and .scss file in a folder in your home folder, you could do something like sass ~/obsidian_snippets/obsidian.scss ./obsidian.css (run from your vault folder). Or you could run the command from your snippets folder, wherever you want to put it, and use sass ./obsidian.scss <path/to/vault>/obsidian.css

[Klaas]

@death.au: many thanks. That’s much cleaner than just having a themes folder visible in Obs.

[aja2488]

Hey @Klaas and other potential future Mac folks. You can create a .folder-name folder on the Mac via the command line using the mkdir (e.g., mkdir .themes)

[Klaas]

@aja2488: thanks, that works.

For others who might want to do this I would add that making a .folder-name folder visible on macOS they need to do command-shift-. = command-key, shift-key, period-key

[argentum]

Thanks for writing this! I tried to follow your tutorial, but I might be missing something. Inside my vault I have a folder .themes

.themes
├── colors.css
├── obsidian.scss
├── quotes.css
├── tags.css
└── transclusion.css

And I’m calling sass ./.themes/obsidian.scss ./obsidian.css from the root of my vault. From what I understood, that should have appended the “mixins” to the obsidian.css file, but instead it gets replaced with the contents of my obsidian.scss:

@use '../obsidian.css';
@use "colors";

/*# sourceMappingURL=obsidian.css.map */

The result is going back to “no theme”. Any idea what could be going wrong?

[Klaas]

@death.au: like with your Andy Mode, I am discovering how very useful this script is.Once you’ve got you mixin folder and .scss file set up, it is a cinch to amend a new obsidian.css theme for trying out.

There is 1 more step that could be taken: a Keyboard Maestro macro. I downloaded KM yesterday so have no knowledge of it at all, but I downloaded a few of the macros shared on this forum, and it seems KM is very powerful indeed, able to automate any task, incl. opening a terminal, change directory to the Obs root folder, and running your script.

[death.au]

Not sure. Everything sounds right… I just created a test folder and copied your code and it seems like it worked fine on my end. Here’s a screen recording of me running the command (using VS Code so that you can see the live update)

Unless something has gone wrong with the SASS install and it’s not interpreting the .scss file properly, I’m not sure what could be going wrong there…

[death.au]

I’m not familiar with Keyboard Maestro, but from what I’ve heard, that should be doable. If you work something out, let me know and I’ll link to it in the first post.

[argentum]

Huh… well, I dug a little deeper, and it seems I had Ruby Sass instead of Dart as part of an old jekyll installation. After removing that, the correct binary is being used and it works!

[death.au]

Glad you were able to work it out!

[oxysmart]

This is awesome Gordon. I picked up your name from your interviews. This is a dream come true to be able to mix ‘n’ match styling until its just the way we want . Thanks.