Migrate from Sass to vanilla CSS with native nesting and custom properties#43
Merged
Migrate from Sass to vanilla CSS with native nesting and custom properties#43
Conversation
- Replace variables.scss with variables.css using CSS custom properties - Replace tufte.scss with tufte.css using native CSS nesting - Convert all 40+ Astro component style blocks from SCSS to vanilla CSS - Replace Sass variables () with CSS custom properties (var(--var)) - Replace @include serif/sans-serif mixins with font-family: var(--font-serif/--font-sans-serif) - Replace @include dimmed with opacity: 0.6 - Replace Sass media query interpolation with inline media query values - Replace rgba($color, val) with color-mix() for CSS variable compatibility - Remove sass dependency from package.json Co-Authored-By: Davis Haupt <davis@davishaupt.com>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for davish-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Co-Authored-By: Davis Haupt <davis@davishaupt.com>
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
… Astro processing Co-Authored-By: Davis Haupt <davis@davishaupt.com>
…tom-media - Add postcss-custom-media and @csstools/postcss-global-data as devDependencies - Define @Custom-Media aliases in src/custom-media.css (--phone, --tablet, --desktop, --small-desktop) - Replace all hardcoded media query strings with @Custom-Media references across 17 files - PostCSS resolves the aliases at build time, so output CSS is identical Co-Authored-By: Davis Haupt <davis@davishaupt.com>
Co-Authored-By: Davis Haupt <davis@davishaupt.com>
Co-Authored-By: Davis Haupt <davis@davishaupt.com>
davish
approved these changes
Apr 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Migrate from Sass to vanilla CSS
Summary
Replaces all Sass/SCSS usage with vanilla CSS, leveraging native CSS nesting and CSS custom properties. The
sassdev dependency is removed entirely.New files:
src/variables.css— all Sass$variablesconverted to CSS custom properties on:root, including--font-serif/--font-sans-serifwith a@media printoverridesrc/tufte.css— vanilla CSS rewrite oftufte.scssusing native nestingsrc/custom-media.css—@custom-mediabreakpoint aliases (--phone,--tablet,--desktop,--small-desktop)postcss.config.mjs— configurespostcss-custom-mediaand@csstools/postcss-global-datato resolve@custom-mediaat build timeAcross ~40+
.astrofiles:<style lang="scss">→<style>@import "/src/variables.scss"$var→var(--var)@include serif/sans-serif→font-family: var(--font-serif/--font-sans-serif)@include dimmed→opacity: var(--dimmed-opacity)(defined as--dimmed-opacity: 0.6invariables.css)@media #{$media-size-phone}→@media (--phone)(and--tablet,--desktop,--small-desktopfor other breakpoints) — resolved to concrete values at build time bypostcss-custom-mediargba($accent-color, 0.2)→color-mix(in srgb, var(--accent-color) 20%, transparent)&-itempatterns to top-level selectors (e.g.,.pagination &-item→.pagination-item)Build verified:
npm run buildpasses with no errors. Netlify deploy preview is live.Updates since last revision
opacity: 0.6withvar(--dimmed-opacity)CSS variable — Added--dimmed-opacity: 0.6tovariables.cssand replaced all 13 hardcodedopacity: 0.6usages across 11.astrofiles withvar(--dimmed-opacity). This mirrors the old Sass@include dimmedmixin pattern with a single source of truth.@custom-media— Addedpostcss-custom-mediaand@csstools/postcss-global-dataas devDependencies. All hardcoded media query strings (e.g.,@media (max-width: 684px)) are now@custom-mediareferences (e.g.,@media (--phone)), defined once insrc/custom-media.css. PostCSS resolves these at build time so the output CSS is identical to before.Previous updates
:global()inside native CSS nesting — Astro's scoped CSS processor does not handle:global()directives when they appear inside native CSS nesting blocks (with Sass, nesting was flattened first, then Astro processed:global()). This caused theh2subtitle on the reading page ("Goodreads at home") to render unstyled (bold/large) instead of the intendedfont-weight: 400; font-size: 1rem. Fixed by flattening:global()selectors to top-level inIntro.astroandHero.astro.pnpm-lock.yaml— Netlify uses pnpm withfrozen-lockfile, so the lockfile needed updating to reflect the sass removal.Review & Testing Checklist for Human
Notes
opacity: 0.65insrc/components/og/og_image.tsxwas intentionally left as-is since it uses a different value and is for OG image generation, not the dimmed pattern.opacity: 0.6insrc/styles.jsis inside a comment block (old Sass reference) and was left unchanged.Link to Devin session: https://app.devin.ai/sessions/e973f791f04f40fda3ee828b4e1ad9f8
Requested by: @davish