Skip to content

Instantly share code, notes, and snippets.

@tortillaj
Created May 1, 2015 13:40
Show Gist options
  • Save tortillaj/4cc12305a36de9006761 to your computer and use it in GitHub Desktop.
Save tortillaj/4cc12305a36de9006761 to your computer and use it in GitHub Desktop.
Extending a placeholder class in Sass
<p>A "placeholder" class does not print out the class itself. It is useful when you have CSS properties that don't apply to any specific element in the HTML, but will be used in many places on elements with different selectors.</p>
<p class="something-else">Read More</p>
<p>Try overriding a propery in the .something-else class after the @extend directive.</p>
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
$off-black: #4d4d4d;
%button {
padding: 5px 10px;
border: 1px solid $off-black;
background-color: white;
appearance: none;
display: inline-block;
transition: background-color 0.25s ease;
&:hover {
cursor: pointer;
background-color: #ccc;
}
}
.something-else {
@extend %button;
}
.something-else {
padding: 5px 10px;
border: 1px solid #4d4d4d;
background-color: white;
appearance: none;
display: inline-block;
transition: background-color 0.25s ease;
}
.something-else:hover {
cursor: pointer;
background-color: #ccc;
}
<p>A "placeholder" class does not print out the class itself. It is useful when you have CSS properties that don't apply to any specific element in the HTML, but will be used in many places on elements with different selectors.</p>
<p class="something-else">Read More</p>
<p>Try overriding a propery in the .something-else class after the @extend directive.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment