Gerillass: Brand Logo Sass Mixin

Brand Logo

Type: Mixin

@include brand-logo();

* You can call mixins with or without the gls- namespace (e.g. @include gls-brand-logo();).

The Brand Logo Sass mixin helps you create an SEO-friendly logo component for your brand's website using CSS best practices.

Arguments

Name	Type	Description
`$width`	number (with unit)	Sets the width value of the logo image.
`$height`	number (with unit)	Sets the height value of the logo image.
`$image-url`	string	Sets the URL of the logo image. Works best with absolute URLs. This argument is optional, so you can also specify the image with the style attribute.

Examples

It is important to use markup similar to the example below. The containing element does not have to be an <h1> tag, so feel free to change it depending on the SEO strategy you use on your site.

HTML

<h1 class="brand-logo">
  <a href="#">Coolors</a>
</h1>

Sass

.brand-logo{
  @include brand-logo(
    $width: 100px,
    $height: 30px,
    $image-url: "https://coolors.co/assets/img/logo.svg"
  );
}

CSS

.brand-logo {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 30px;
  background-image: url("https://coolors.co/assets/img/logo.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.brand-logo a {
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  text-indent: 100%;
}
.brand-logo a::after {
  content: "";
  position: absolute;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

Result

As mentioned before, the $image-url argument is optional. With that in mind, let's specify the logo image using the selected element's style attribute.