OhSnap! Create Five Hero Banners with One SASS Mixin

The "OhSnap!" series explores bite-sized tips that you can apply today.

---

Intro

I love CSS and often joke that if possible, I would happily use it to program full-stack applications. 😅

As silly as that sounds, leveraging SASS does allow us to get a little "programmatic" as we can utilize variables, functions, and conditional statements.

---

The Scenario

A little while ago I built a custom WordPress theme for a client that was applied to a multi-page site.

Each page had a big hero banner at the top, with an image and text in it. In the initial stages, the text color changed as well between specific pages.

One way to approach this is to create separate hero banner styles for each page. Since there are unique images and color changes for the text between banners, this sort of makes sense.

However, this wouldn't be very DRY (Don't Repeat Yourself). There would certainly be more repeated code than unique code and for multiple screen-sizes as well.

---

The Solution

Entrée SASS mixins and its js-like friends; functions, arguments, conditional statements, and variables to the rescue!

1. HTML

Let's first start with the HTML for one of the banners. They will essentially all have the same structure and classes. (Except for the homepage that also has a button, but this won't affect our mixin.)

<!-- This class just hides any overflow and sets a relative position -->
<section class="hero__container">

  <!-- aboutHero is the important class here. This will use our mixin magic. :) (hero-effect just controls some animations.) -->
  <div class="aboutHero hero-effect">
    <div class="container">
      <h1>About</h1>
    </div>
  </div>

  <!-- This adds a curve to the bottom of the hero -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 215" class="hero__curve">
    <path d="M0 0L120 16C240 32 480 64 720 64C960 64 1200 32 1320 16L1440 0V214.5C960 214.5 480 214.5 0 214.5V0Z" fill="white" fill-opacity="1" />
  </svg>

</section>

As mentioned above, the important class to focus on is aboutHero. All the other classes and HTML structure will stay the same between all pages.

However, each page will indeed receive a unique hero class, in the same div.

• homeHero
• aboutHero
• contactHero
• serviceHero
• gdprHero

We will come back to this in the Hero SCSS section...

2. SASS Mixin

Mixins allow us to store chunks of code and apply them where ever we want in our application. We are going to use this to create one robust template that handles all possible styles and all responsive screen sizes.

Below I'll breakdown in the comments what each section is doing.

/* Our mixin accepts arguments like a function */
/* Spreading the arguments allows us to specify multiple values in our mixin */
/* Their values will be submitted later on in our code */
@mixin heroFramework($arg...) {
    padding-top: 120px;
    padding-bottom: 252px;

    /* Using an argument we are able to specify the image URL at a later time. */ 
    /* Since this is the first argument we expect to receive nth($arg, 1) is used. */
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), url(nth($arg, 1));
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-content: center;

    .container {
        margin: auto;
    }

    h1 {

        /* Here we are calling another mixin that specifies the font stack */
        @include mPlusFont;
        font-weight: 400;
        max-width: 400px;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);

        /* Here we are using a conditional statement. */ 
        /* If the second value the user submits is "white" then set that as the color. */ 
        /* If not, then set the color to a SASS variable */
        @if nth($arg, 2) == white {
            color: white;
        } @else {
            color: $body-color;
        }
    } 

    /* All responsive styles are taken into account below */
    @media screen and (min-width: 1800px) {
        padding-top: 40px;
        min-height: 850px;
    }

    @media screen and (min-width: 1400px) and (max-width: 1799px) {
        min-height: 700px;
    }

    @media screen and (min-width: 1300px) and (max-width: 1399px) {
        min-height: 600px;
    }

    @media screen and (max-width: 675px) {
        background-position: center;
        padding-top: 150px;
        padding-bottom: 140px;
        text-align: center;
        h1 {
            font-size: 50px;
            max-width: 300px;
            margin: 30px auto 1rem;
            color: white;
        }
    }

}

3. SCSS Usage

Ok, that section above probably seemed like a lot. Keep in mind, we only need to create it once and not 5 different times.

With all that prep work we just need to call the mixin and specify a unique URL and the color. That is it! Super clean.

.homeHero {
    @include heroFramework("../img/hero-home.jpg", white);
} 

.aboutHero {
    @include heroFramework("../img/hero-about.jpg", false);
}

.serviceHero {
    @include heroFramework("../img/hero-service.jpg", false);
}

.contactHero {
    @include heroFramework("../img/hero-contact.jpg", white);
}

.gdprHero {
    @include heroFramework("../img/hero-gradient.jpg", white);
}

---

Summary

Using a mixin and some programming concepts, you have learned how to efficiently create a complex code block that will scale with your site's growth! Happy Coding!

---

Resources

• Mixin Tutorial
• 20 Minute Overview Of SASS
• Important Update Coming To SASS

---

Thumbnail designed with Figma.