Replace SCSS with CSS custom properties

[SteelWagstaff]

We have run into some problems with our use of SCSS in Pressbooks, in part because we're using SCSS in ways it wasn't ever intended to be used. Rather than refactoring our themes so that we can update to latest version of SCSSPHP, it might make more sense to explore replacing SCSS variables and SCSS more generally with CSS custom properties, now that they're widely support by all modern browsers.

Notes

See https://youtu.be/1FB7oZ47r2k for context and brief explanation. Ned has started experimenting with a prototype to see how feasible this would be for PDF/EPUB exports, in particular. See https://github.com/greatislander/buckram-custom-props

Next steps

We may want to work through Buckram and develop a schema

1. easy $variables -> --var
2. harder/more complex (blocks, etc.) that need context block switching, etc.
3. look at API that turns theme options -> SASS and how to turn this into custom properties
4. look at export routine and replace SCSSPHP processing into ‘combine CSS properties’. For example, :root { --base-font-size: var(--custom-base-font-size, 14px); }
5. update themes → replace variables with root variable declarations (e.g. :root { --custom-base-font-size: 12px; }

Ned’s idea – he could potentially work through Buckram and produce a well-documented schema and migration map. Could even be a Buckram PR. Comprehensive proposal would probably be ~25-30 hours of work for Ned (2-3 months).

[SteelWagstaff]

Read and appreciated this recently (Chris Ferdinand makes the case that we can drop SASS in favor of vanilla CSS for many/most projects): https://gomakethings.com/is-it-time-to-drop-sass/. There's still some complexity we'll need to figure out with PDF exports, etc.