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.

[SteelWagstaff]

I have begun working on a potential migration plan in a prototype branch: https://github.com/pressbooks/buckram/tree/feat/migrate-to-css-properties

[arzola]

This issue has been automatically closed as part of an organization-wide backlog review.

Reason: This issue was created 3y 4m ago with no updates in the last 2m.

If this is still relevant, please feel free to reopen it with updated context. We appreciate your contributions and want to ensure our issue tracker stays actionable.

Learn more: https://pressbooks.community/t/announcement-automatic-closure-of-old-github-tickets/4542

[SteelWagstaff]

Extremely relevant. Worked on this a bit over the holiday break. Would love to pick this back u pand collaborate with Ned or others on it.