Slidecraft 101: Creative uses of SASS loops

Hello and welcome back to my multi-part series about what I like to call slidecrafting; The art of putting together slides that are functional and aesthetically pleasing. I will be using quarto presentations. This is the ninth post, you can find all other posts in the slidecraft 101 project.

In Slidecraft 101: Better SCSS files I first started using SASS to its fullest, and this blog post will explore one additional use-case I left out from that blog post.

Using nested loops to create classes

We saw in Slidecraft 101: Better SCSS files - using each how we could loop over a map of colors to create a number of CSS classes. And we don’t have to stop there, we could just as well nest the loops to create any number of combinations

In our first example, I want a fun gradient shadow/highlight effect for text. We can get that effect using something like following

background-image: linear-gradient(90deg, yellow, blue);
background-size: 100% 42%;
background-repeat: no-repeat;
background-position: 0 85%;
width: fit-content;

I want it to work on both inline text and as a way to handle the header, the selectors for that would be span.my-class and .my-class > h2 respectively.

span.my-class, .my-class > h2 {
  background-image: linear-gradient(90deg, yellow, blue);
  background-size: 100% 42%;
  background-repeat: no-repeat;
  background-position: 0 85%;
  width: fit-content;
}

And them we fill in the rest, using the @each command twice nestedly over a map of colors.

/*-- scss:defaults --*/

$colors: (
  "red": #FFADAD, 
"orange": #FFD6A5, 
  "yellow": #FDFFB6, 
  "blue": #aad2e7, 
  "purple":#b4addd
);

/*-- scss:rules --*/

@each $name1, $col1 in $colors {
  @each $name2, $col2 in $colors {
    span.hl-#{$name1}-#{$name2}, .hl-#{$name1}-#{$name2} > h2 {
      background-image: linear-gradient(90deg, $col1, $col2);
      background-size: 100% 42%;
      background-repeat: no-repeat;
      background-position: 0 85%;
      width: fit-content;
    }
  }
}

I know we are creating some non-interesting classes such as .hl-yellow-yellow but for what we are doing, the tradeoff between avoiding them and how little it impacts us to have them. I think it is a worthwhile tradeoff.

Important

The slides in this post are interactive, advance them to see the other classes.

qmd scss

Note

You don’t need these compound classes for everything. For example, the class .hl-green-bold isn’t going to be useful as you could just as easily create .hl-green and .bold separately. This trick works best when two elements are used together in a tightly coupled way, such as in gradients.

For our second example, we are continuing with the gradients, but instead trying to apply them to the background. My goal was to add a gradient line to the right side of the slide.

I was able to create that effect, by layering 2 gradients on top of each other. The first gradient contained the two colors I was interested in, and the names of the class. The second layer, which I placed on top, goes from white to transparent. I set up the transition between those two colors to be super sharp, resulting in the effect you see below

qmd scss

since we are doing something interesting, we could also have used a separate $colors map just for this effect to not interfere with what else we are doing.

Roundup

Is this the most useful thing I have shown so far? properly not, but I find it interesting and it is a quick way to spice up these slides.