Sass content

by jsn1nj4

HTML

<article class="event" id="carolina_code_conference-2023">
  <h1 class="name"></h1>
  <h3 class="tagline"></h3>
  <p class="date">Date: </p>
  <p class="location">Location: </p>
  <p class="venue">Venue: </p>
  <p class="website">Website: </p>
  <p class="call-for-speakers">Call for speakers: </p>
</article>

SCSS

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

article.event {
    @include after("name", "tagline", "date", "location", "venue", "website", "call-for-speakers");
    
    &#carolina_code_conference-2023 {
    --name: "Carolina Code Conference 2023";
    --tagline: "A polyglot conference for all who code!";
    --date: "8/19/2023";
    --location: "1 N. Main St, Greenville, SC 29601";
    --venue: "Greenville ONE";
    --website: "https://carolina.codes";
    --call-for-speakers: "4/11/2023";
  }
}