scss _stretch-link.scss

Posted 2021-05-18

@mixin stretch-link {
  & { position: relative; }
  a { position: absolute; height: 100%; width: 100%; }
}

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 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; } }