Instantly share code, notes, and snippets.

Embed
What would you like to do?
<h1 class="header__logo">Header Logo</h1>
<span class="footer__logo">Footer Logo</span>
//
// Article Info(Fun Part):
//
@mixin person($who) {
#{$who}-name: "Parhum Khoshbakht";
#{$who}-url: "http://parhum.net";
#{$who}-twitter: "@parhumm";
}
%article__info {
article-title: "Using @extend in a @mixin for OOCSS Structre";
article-url: "http://parhum.net/blog/ui/oocss-styleguide-with-sass/";
@include person(author);
}
//
// Codes Here:
//
%helper--text-hidden {
text-indent: -9999px;
line-height: 1px;
font-size: 1px;
overflow: hidden;
display: block;
}
@mixin text-hidden($width, $height) {
@extend %helper--text-hidden;
width: $width;
height: $height;
}
.header__logo {
@include text-hidden(150px, 113px);
float: left;
background: url('http://parhum.net/wp-content/uploads/2014/08/sass-white-logo.png') no-repeat 0 0;
}
.footer__logo {
@include text-hidden(75px, 56px);
margin: 0 auto;
background: url('http://parhum.net/wp-content/uploads/2014/08/sass-black-logo.png') no-repeat 0 0;
}
.header__logo, .footer__logo {
text-indent: -9999px;
line-height: 1px;
font-size: 1px;
overflow: hidden;
display: block;
}
.header__logo {
width: 150px;
height: 113px;
float: left;
background: url("http://parhum.net/wp-content/uploads/2014/08/sass-white-logo.png") no-repeat 0 0;
}
.footer__logo {
width: 75px;
height: 56px;
margin: 0 auto;
background: url("http://parhum.net/wp-content/uploads/2014/08/sass-black-logo.png") no-repeat 0 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment