Last session of 2024

CSS Preprocessors

Last updated: August 26, 2023

What is a CSS “preprocessor?” And pre what?

some-styles.css
header {
	background-color: blue;
}

h1 {
	font-size: 2.4rem;
}

p + p {
	margin-top: 1em;
}

.thing {
	color: red;
}

This stuff is just floating around in the global space!

What if there’s another thing called “thing”?
some-better-styles.css
header {
	background-color: blue;
}

header h1 {
	font-size: 2.4rem;
}

header :is(p + p) {
	margin-top: 1em;
}

header .thing {
	color: red;
}

.thing {
	color: green;
}

This is better. It’s scoped to the header so a random other thing shouldn’t conflict. Or would it…
module.css
my-specific-module {
	background-color: blue;
}

my-specific-module h1 {
	font-size: 2.4rem;
}

my-specific-module :is(p + p) {
	margin-top: 1em;
}

my-specific-module .thing {
	color: red;
}

my-specific-module .thing.special {
	color: purple;
}

Maybe header is too loose, though. Maybe there are many headers.

Now, these are super safe. But there’s a lot of repetition.
something-ideal.css
my-specific-module {
	background-color: blue;
	h1 {
		font-size: 2.4rem;
	}
	:is(p + p) {
		margin-top: 1em;
	}
	.thing {
		color: red;
		&.special {
			color: purple;
		}
	}
}

This would be nice. (or at least some people thought so)

This way, you aren’t writing out the same element in your selector over and over.

What if you could write CSS in a different way? What would the browser think? It probably wouldn’t understand. But… you could write a program that took this superset of CSS and turned it into regular old CSS the browser could read. That’s the “processing,” and it happens before (pre) – getting used in the browser. (we think).

The program would read through and parse things out into tokens, and based on the spaces and punctuation, it could figure out the final output. And then it would produce the normal CSS you know and love. Why is this good? Well, it’s easier to write. But arguably easier to read. But it does have the benefit of having less repetition – and so, there’s less chance of error.

Sass

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Stylus

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Native (new in 2023)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Video in the works!

We’ll make a video going over it – but just marking our territory.

What’s next?

Show things in order of importance

probably mixins?
Last session of 2024