Created
September 11, 2011 20:42
-
-
Save adamstac/1210097 to your computer and use it in GitHub Desktop.
Sass @mixin mentioned in this tweet: http://twitter.com/adamstac/status/112961697970536449
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin stretch-link { | |
& { position: relative; } | |
a { position: absolute; height: 100%; width: 100%; } | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
header[role="banner"] h1 { | |
text-indent: -119988px; | |
overflow: hidden; | |
text-align: left; | |
background-image: url('../images/logo.png?1315759894'); | |
background-repeat: no-repeat; | |
background-position: 50% 50%; | |
width: 241px; | |
height: 91px; | |
} | |
header[role="banner"] h1 { | |
position: relative; | |
} | |
header[role="banner"] h1 a { | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This usage example assumes you've imported the mixin | |
// from a library or further up the stack | |
// IMPORTANT: This example also leverages a mixin available in Compass | |
h1 { | |
@include replace-text-with-dimensions("logo.png"); | |
@include stretch-link; | |
} | |
// This can also be condensed to one line: | |
h1 { @include replace-text-with-dimensions("logo.png"); @include stretch-link; } | |
// Here's an alternate using mixins only from Compass | |
// Thanks for the heads up Chris: https://twitter.com/#!/compass/status/112994911632101376 | |
h1 { | |
@include replace-text-with-dimensions("logo.png"); | |
position: relative; | |
a { @include stretch; } | |
} | |
// And again, condensed to one line: | |
h1 { @include replace-text-with-dimensions("logo.png"); position: relative; a { @include stretch; } } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment