How To Specify Top Level Selectors Within Mixins With LESSphp

While creating mixins for cool snippets of reusable css, I had trouble figuring out a way to set styles for top level elements while inside a mixin. To illustrate, let’s look at this example from CSS tricks which uses pseudo elements to create a bar that breaks out a container to touch both sides of the screen.

section {
   width: 50%;
   margin: 0 auto;
}
h2 {
   position: relative;
   background: black;
}
h2:before, h2:after {
   content: '';
   position: absolute;
   background: black;  /* Match the background */
   top: 0;
   bottom: 0;
   width: 9999px;   /* some huge width */
}
h2:before {
   right: 100%;
}
h2:after {
   left: 100%;
}
html, body {
    overflow-x: hidden;
}

It’s a pretty neat effect. The question is, how would you turn this into a mixin, so you can use it on an element of your choice?

Most likely you’ll start out with something like this:

.extended-bar() {
     position: relative;
     background: black;
   &:before, &:after {
     content: '';
     position: absolute;
     background: black;  /* Match the background */
     top: 0;
     bottom: 0;
     width: 9999px;   /* some huge width */
   }
   &:before {
     right: 100%;
   }
   &:after {
     left: 100%;
   }
}

You could then drop this in where you like it. Let’s for example apply it to a h3 heading:

h3 {
   .extended-bar;
}

But we’re missing something. The effect relies on a parent container to have a width. In this example ¬†it’s the section element. We can reasonably assume that this will be specified in the normal course of the stylesheet anyway.

The property applied to the html and body element though is really important (it prevents a horizontal scrollbar from displaying). How do we put that in there? We can’t just drop this into the mixin because it will be prefixed by whatever element the mixin is applied to, in this case the h3 selector. A problem.

So I looked at a different technique as a workaround and arrived at cool feature called selector expressions. This functionality allows you to dynamically create a selector based on a given parameter. With this we can create a mixin that we can call from the top level and let it generate our desired selector dynamically.

.extended-bar( @selector ) {
  html, body {
    overflow-x: hidden;
  }
 }
 (e (@selector ) {
   position: relative;
   background: black; 

 &:before, &:after {
   content: '';
   position: absolute;
   background: black;  /* Match the background */
   top: 0;
   bottom: 0;
   width: 9999px;   /* some huge width */
 }
 &:before {
   right: 100%;
 }
 &:after {
   left: 100%;
 }

}

To create our effect we just need to call it with the desired selector:

.extended-bar( h2 )

This solution will print out the styles like the original css example. This mixin is not the best piece of less to actually use in the wild. In the event that you call the mixin multiple times ugly style duplication issues arise.

I am working on a CSS post processing tool that remedies style duplication issues, if you’re interested, sign up to my newsletter list below and I’ll let you know when I release it.
[yks-mailchimp-list id=”85fd778c18″]

Leave a Reply

Your email address will not be published. Required fields are marked *