Doing it Wrong #1: Using CSS to Render Content

by jsn1nj4

HTML

<article class="event" id="awesome_regional_conference-2023">
  <h1 class="title"></h1>
  <h3 class="date">Date: </h3>
  <p class="venue">Venue: </p>
  <p class="location">Location: </p>
</article>

SCSS

@mixin after($labels...) {
    @for $i from 0 to length($labels) {
        .#{nth($labels, $i + 1)}::after { content: var(--#{nth($labels, $i + 1)}) }
    }
}

.event {
  @include after("title", "date", "venue", "location");
  
  &#awesome_regional_conference-2023 {
    --title: "Awesome Regional Conference 2023";
    --date: "5/21/2023";
    --venue: "Totally Real Conference Hall";
    --location: "123 Totally Real Blvd, Austin, Tx";
  }
}