5 essential less mixins
When using css preprocessors, you'll soon find that mixins are a true blessing. These little css functions capture common css patterns and save you the time of typing them over and over again. If you're lucky, they even allow you to scrap a few redundant classes from your html. Over the past couple of months I've gathered a couple of mixins that seemed to pop up in every project I started, so here's my summary of essential mixins that I feel could make it into your base template.
starting a new project
I don't think I could ever work without the use of a preprocessor anymore, if only to keep track of vendor-prefix hell that would otherwise litter my css code. The use of mixins not only made css maintenance a lot easier though, it also helped to clean up some necessary but ultimately redundant classes in html. Common css snippets translated to classes (often with functional implications) that would ease their way into the html code because it proved too much hassle to repeat the same code in css time and time again.
This led me to a selection of mixins that I added to my own base css (now less) template as they come in handy in just about every project that I start.
1. hiding elements from screen
/* html */ <div class="label">price</div> <div class="value">€ 10</div> /* mixin */ .hidden {position:absolute; top:auto; left:-999em; right:auto;} /* css */ .label {.hidden;} Probably the most obvious of all mixins. I used to litter this class around my html code simply because some elements needed to be hidden from screen (and screen reader would still need to pick them up). Putting the css code separately on each element was tricky because this particular method has been prone to change from the very start (accessibility, compatibility and performance issues mostly), making maintenance pretty difficult.
The problem with turning it into a separate class was that the method relies heavily one the position:absolute property. If another class overruled the positioning css of the .hidden class the method would be rendered useless. By using the class as a mixin though, you avoid all this mess. No more .hidden classes littering your html, no more selector weight issues with conflicting classes. Everybody wins.
2. hiding text
/* html */ <a href="#">share this on twitter</a> /* mixin */ .hideText {text-indent:100%; white-space:nowrap; overflow:hidden;} /* css */ a {.hideText;} Pretty much the same as the .hidden class, only now we want to hide actual text. It's not about hiding an entire element from screen anymore, it's just about hiding the text (usually done for image replacement). Once again this method is prone to change, it used to litter the html code and it used to conflict with other css rules. Using it as a mixin fixes all of this nonsense.
spanning a container
/* html */ <article class="news overview"> ... <a class="more">read more</a> </article> /* mixin */ .span {position:absolute; left:0; top:0; right:0; bottom:0;} /* css */ .news {position:relative;} .news a.more {.span;} Sometimes you want a certain element to span the entire surface of one of its parents. Rather than using widths and heights for this, there's an easier method where all the four positioning parameters (left, right, top, bottom) are set to 0 (in combination with a position:absolute). This comes in handy when you want to fake block level links (see the html example above) or when you want to combine changing hover images and image replacement techniques (using :before or :after).
clearfix
/* mixin */ .clearfix {zoom:1; display:inline-block; display:block; &:after {display:block; visibility:hidden; height:0; clear:both; content:"";} } /* css */ .gridWrap {.clearfix;} The ever so popular clearfix hack can also be transformed into a mixin, with a little help of preprocessor nesting. This is pretty cool, because you can now simply apply the clearfix hack in css without having to memorize the code and without having to add the extra :after line for each instance. It's always been a nasty hack, turning it into a mixin greatly reduces its impact on your code.
left/right positioning pattern
/* mixin */ .leftRight (@width, @gutter){overflow:hidden; >*:first-child {float:left; width:@width;} >*:last-child {margin-left:@width + @gutter;} } /* css */ .spec {.leftRight(10em, 1em);} A common positioning method I like to use. Float the first element to the left and pass it by applying a big enough left margin on the second element. Add a clearing fix on the containing element and you have a robust css layout. The irritating thing of this method lies with the connection between the width of the float and the margin on the second element, which are highly dependent on each other (the margin = width float + gutter). Meaning that whenever you change the width of the float, you also need to change the value of the margin. Turning this into a mixin with two parameters takes all those problems away and allows you to define the pattern in one single swoop.
conclusion
I'm sure there are countless of other interesting mixins out there, there are even some github initiatives for making mixin boilerplates and whatnot (can't seem to find the url though). In the important thing is to decide for yourself which mixins you deem interesting enough to carry over between different project, just consider this list to be a nice opportunity for inspiration.