Skip to content

Instantly share code, notes, and snippets.

@matiassingers
Created August 22, 2014 03:06
Show Gist options
  • Save matiassingers/fbab80ae4194e80b7ad6 to your computer and use it in GitHub Desktop.
Save matiassingers/fbab80ae4194e80b7ad6 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<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>
// ----
// 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
.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]";
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment