Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="ordinary-page">
  <div class="page-header">
    <div class="page-title">
      <h1>Ordinary Page Heading</h1>
    </div>
  </div>
</div>

<div class="search">
  <div class="page-header">
    <div class="page-title">
      <h1>Search Page Heading</h1>
    </div>
  </div>
</div>

<div class="error404">
  <div class="page-header">
    <div class="page-title">
      <h1>404 Page Heading</h1>
    </div>
  </div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

$sections: (search: '[search-icon]', error404: '[404-icon]')

.page-title
  display: inline-block
  margin: 0
  &:before
    display: inline-block
    vertical-align: middle
    color: #222222
    -webkit-font-smoothing: antialiased
    content: '[any-symbol]' // search
    
    @each $class, $icon in $sections
      .#{$class} &
        content: $icon

SassMeister-output.css

.page-title {
  display: inline-block;
  margin: 0;
}
.page-title:before {
  display: inline-block;
  vertical-align: middle;
  color: #222222;
  -webkit-font-smoothing: antialiased;
  content: "[any-symbol]";
}
.search .page-title:before {
  content: "[search-icon]";
}
.error404 .page-title:before {
  content: "[404-icon]";
}

SassMeister-rendered.html

<div class="ordinary-page">
  <div class="page-header">
    <div class="page-title">
      <h1>Ordinary Page Heading</h1>
    </div>
  </div>
</div>

<div class="search">
  <div class="page-header">
    <div class="page-title">
      <h1>Search Page Heading</h1>
    </div>
  </div>
</div>

<div class="error404">
  <div class="page-header">
    <div class="page-title">
      <h1>404 Page Heading</h1>
    </div>
  </div>
</div>