Compass VS Sass

Soon after, Chris Epstein, the creator of Compass and co-creator of Sass, forked Brandon’s repository and asked for some help with the design. Being a big fan of Chris’s, Brandon jumped on the opportunity straight away. He pulled out the content, made the theme more generic, and named his creation Octopress.

I use a CLI tool to compile it as changes are made. I use http://compass-style.org/

Compass/compass - Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.

If you use SASS /SCSS and a (Node?) processor that turns it into CSS, you could: • Create your SCSS file with custom styling • Inside that file import the Bootstrap SCSS so you can use the Bootstrap defined media queries (the ones “col-md-5”, “col-lg-3”, etc. respond to) • Have your website load your SCSS generated CSS file as the CSS (including Bootstrap)

Learn how to bundle your dependencies. You've got jQuery, OpenSeaDragon, Popper and Bootstrap all imported via CDN. If you try to pull these through a build tool and properly tree-shake your dependencies to only include the resources that you actually use, you can reduce your js bundle size drastically. In addition to this, if you're not using everything Bootstrap has to offer, you can also use tools like SASS to only include the styles you need for your site.

Just be sassy and get the compiled output

While CSS itself is ubiquitous, the way each project uses it is certainly not. Before preprocessors like Sass and Less, there were entire methodologies, like BEM, for writing and maintaining your CSS. Even with methodologies and preprocessors to help our style writing, there is still an abundance of CSS bloat in all projects.

Next.js - A React framework for production that makes it easy to spin up a full-stack application. Cosmic - A Headless CMS enables the independence of the data (content) layer and gives us the ability to quickly manage website content. Sass - A stable, and powerful professional-grade CSS extension language.

Astro has no built-in support for Sass1 or Tailwind CSS, but accepts the usual packages to provide either. You can, of course, use vanilla CSS with no add-ons whatsoever.

Harlowe doesn't really include an example of its default HTML and CSS in its manual, and the relevant section in its source code repository on Heptapod is written using SCSS, so you may need some knowledge of that utility to complete understand the contents of those CSS related files.

CSS Preprocessors (LESS & SASS)

Use TypeScript for clearer structure, SCSS or SASS and maybe styled-components for styling, use the Storybook tool for independent (React) component development.