Skip to content

Instantly share code, notes, and snippets.

@bohman
Created November 3, 2014 07:13
Show Gist options
  • Save bohman/11d3dbd3becefe0a388b to your computer and use it in GitHub Desktop.
Save bohman/11d3dbd3becefe0a388b to your computer and use it in GitHub Desktop.
When SASS becomes a sledgehammer for a nail
/* This is a shorter way to do it with css */
[class*="btn"] {
min-width: 100px;
padding: 1em;
border-radius: 1em;
}
.btn--twitter {
color: #fff;
background: #55acee;
}
.btn--facebook {
color: #fff;
background: #3b5998;
}
<a href="#" class="btn--twitter">Twitter</a>
<a href="#" class="btn--facebook">Facebook</a>
/* This is what this article proposed
http://thesassway.com/intermediate/using-object-oriented-css-with-sass */
%button {
min-width: 100px;
padding: 1em;
border-radius: 1em;
}
%twitter-background {
color: #fff;
background: #55acee;
}
%facebook-background {
color: #fff;
background: #3b5998;
}
.btn {
&--twitter {
@extend %button;
@extend %twitter-background;
}
&--facebook {
@extend %button;
@extend %facebook-background;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment