html 由SassMeister.com生成。

Posted 2021-05-11

<div class="highlight-color__0099CE">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__C1167A">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__EB8F2D">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__39B54A">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__1B1464">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__6D13B0">
  <h1>This is the title</h1>
</div>

.highlight-color__0099CE h1 {
  background: #0099CE;
  color: #fff;
}

.highlight-color__C1167A h1 {
  background: #C1167A;
  color: #fff;
}

.highlight-color__EB8F2D h1 {
  background: #EB8F2D;
  color: #fff;
}

.highlight-color__39B54A h1 {
  background: #39B54A;
  color: #fff;
}

.highlight-color__1B1464 h1 {
  background: #1B1464;
  color: #fff;
}

.highlight-color__6D13B0 h1 {
  background: #6D13B0;
  color: #fff;
}

// ----
// libsass (v3.2.5)
// ----

// Colors.
$brown: #70614F;
$white: #FFFFFF;
$blue: #0099CE;
$green: #39B54A;
$orange: #EB8F2D;
$pink: #C1167A;
$purple: #6D13B0;
$navy: #1B1464;
$black: #000000;
$gray: #6D6D6D;
$lt-gray: #A8A8A9;
$dk-brown: #2b2b2b; 
$beige: #e7e5e3;

// Initiatives.
$arts: $blue;
$community: $pink;
$education: $orange;
$humanitarian: $green;
$nonprofit: $navy;
$partnerships: $purple;

// Highlight color.
@mixin highlight-color($initiative) {
  $stringified: $initiative + unquote("");
  $stripped: str-slice($stringified, 2);

  .highlight-color__#{$stripped} & {
    background: $initiative;
    color: #fff;
  }
}

@mixin highlight-colors() {
  @include highlight-color($arts);
  @include highlight-color($community);
  @include highlight-color($education);
  @include highlight-color($humanitarian);
  @include highlight-color($nonprofit);
  @include highlight-color($partnerships);
}

h1 {
  @include highlight-colors();
}

<div class="highlight-color__0099CE">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__C1167A">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__EB8F2D">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__39B54A">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__1B1464">
  <h1>This is the title</h1>
</div>

<div class="highlight-color__6D13B0">
  <h1>This is the title</h1>
</div>