Refactored callouts using maps, loops, placeholders, and mixins

[GregRos]

Hi! I wanted to combine your callouts with my own custom CSS. But I needed to understand how they worked, and I ended up refactoring a lot of them using some nifty SCSS features that help avoid repetition.

I only noticed Prettier was on after doing some work, and it killed your formatting. I tried to get your stylelinter to work, but it didn't seem in the mood.

Here it is anyway. Hope you'll find it useful!

And thank you so much for your work :heart:

Mixins

repeat-selector (mixin/function)

This is a mixin and a function. Both repeat a selector (usually .callout) N times so you don't have to copy it, and you can easily adjust the specificity.

select-by-data-callout

This mixin selects using:

1. .callout repeated N times using the previous mixin
2. Comma-separated data-callout attribute selectors using :is.

select-by-callout-metadata

This mixin selects using:

1. .callout repeated N times
2. Comma-separated data-callout-metadata attribute selectors using :is

Sections

In most files I used the above mixins to make the code smaller or make it so the specificity is clear.

There are some files that I made larger changes to.

Coloring

I replaced the different coloring selectors using some lists and loops.

Kith

Replaced the kith type selectors with a map of type to color/icon.

Timeline

Replaced the t-N selectors with a map and a loop.

Columns

More loops here

Callout styling

Used some placeholders and @extends together with the above mixins.

Formatting

I use Prettier, and it killed your formatting before I knew what was happening. Hi! I wanted to steal parts of your theme for my own, especially the callouts. But I needed to understand how they worked, and I ended up refactoring a lot of them using some nifty SCSS features that help avoid repetition.

Mixins

repeat-selector (mixin/function)

This is a mixin and a function. Both repeat a selector (usually .callout) N times so you don't have to copy it, and you can easily adjust the specificity.

select-by-data-callout

This mixin selects using:

1. .callout repeated N times using the previous mixin
2. Comma-separated data-callout attribute selectors using :is.

select-by-callout-metadata

This mixin selects using:

1. .callout repeated N times
2. Comma-separated data-callout-metadata attribute selectors using :is

Sections

In most files I used the above mixins to make the code smaller or make it so the specificity is clear.

There are some files that I made larger changes to.

Coloring

I replaced the different coloring selectors using some lists and loops.

Kith

Replaced the kith type selectors with a map of type to color/icon.

Timeline

Replaced the t-N selectors with a map and a loop.

Columns

More loops here

Callout styling

Used some placeholders and @extends together with the above mixins.