Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* 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.
This is a Gerillass technique for image replacement. There are other methods too. Check out the links at the end of this article to find out more.
Arguments
| Name | Type | Description |
|---|---|---|
$width | number (with unit) | Sets the width value of the logo image. Accepts what Sizer accepts: a length or a percentage, a sizing keyword, a CSS-wide keyword, var() or a maths function. |
$height | number (with unit) | Sets the height value of the logo image. Accepts the same values as $width. |
$image-url | string, function | 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. A value that already is an image, var(), url(), image-set() or a gradient, is written as it is rather than wrapped in url(). A list, a number, a colour or a boolean is refused. |
Examples
In this example, I create a logo for Coolors. You can use your own brand's logo file and change the logo text if you like.
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.
<h1 class="brand-logo">
<a href="#">Coolors</a>
</h1>.brand-logo{
@include brand-logo(
$width: 100px,
$height: 30px,
$image-url: "https://coolors.co/assets/img/logo.svg"
);
}.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;
}Note that the background-image declaration has disappeared from the generated CSS.
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.
<h1 class="brand-logo" style="background-image: url(https://coolors.co/assets/img/logo.svg);">
<a href="#">Coolors</a>
</h1>.brand-logo{
@include brand-logo(
$width: 100px,
$height: 30px
);
}.brand-logo {
display: inline-block;
position: relative;
width: 100px;
height: 30px;
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;
}What it refuses
An image that is not one path stops the build. Until 2.3.1 anything went into url(): measured in Chrome 152, a list is dropped, and url(true) is kept but asks for a file named true, so the logo box stayed empty either way.
.brand-logo {
@include brand-logo(120px, 40px, true);
}Error: `true` is not a valid $image-url for `brand-logo`: an image path is a string, and `url(true)` asks for a file of that name, which is never the image. Pass a path as a string, such as `"/img/hero.png"`, or var() or a gradient.A width or height the browser drops stops the build too, the same values Sizer refuses. Until 2.3.1 they compiled, and the browser dropped the declaration without a word.
.brand-logo {
@include brand-logo(120px, 10deg);
}Error: `10deg` is not a valid $height for `brand-logo`: `deg` is not a length unit. A browser drops the declaration.