A placeholder mixin - for Less and Scss

Note: This post is from 2013 and so some links or practices may not be those advised today

I had a dilemma today - I wanted to create a mixin which has variable properties, with Less being our pre-processor of choice, it wasn't as easy as first anticipated. The use-case was for styling the placeholder attribute on an input

Using Less

Styling the placeholder attribute in CSS requires no less that 4 vendor prefixed properties. This can be a pain to try and remember them. I wanted to create a mixin for our less library so that we could style it with a simple class.

However, the problem arose when I wanted to leave the mixin open to be able to pass in whatever I wanted - imagined it working much like a PHP function passing in an array:

.mixin(@styles) {
a {
@styles
}
}
section {
.mixin(color: red; background: blue;);
}

Unfortunately, it didn't work as expected. I reached out for help on twitter and luckily, some friends came to the rescue. After much back and forth, (and with a little bit of help from João we came up with this solution:

.colormixin(@color:false) when not (@color=false) {
color: @color;
}
.stylemixin(@style:false) when not (@style=false) {
.style(@style) when (@style=italic) {
font-style: @style;
}
.style(@style) when (@style=bold) {
font-weight: @style;
}
.style(@style);
}

.placeholder(@color: false, @style: false){
&::-webkit-input-placeholder {
.colormixin(@color);
.stylemixin(@style);
}
&:-moz-placeholder {
.colormixin(@color);
.stylemixin(@style);
}
&::-moz-placeholder {
.colormixin(@color);
.stylemixin(@style);
}
&:-ms-input-placeholder {
.colormixin(@color);
.stylemixin(@style);
}
}

This allows you to specify a color and then either bold or italic.This can be modified and extended, but for the near-future I can only see these being needed. If you want to just make it bold you can do the following:

input {
	.placeholder(false, bold);
}

Using SCSS

With the help of Hugo, we've managed to develop the SCSS version of the Mixin:

@mixin placeholder($contents...) {
$prefixes: ':-webkit' '-moz' ':-moz' '-ms';
@each $prefix in $prefixes {
&:#{$prefix}-input-placeholder {
@each $content in $contents {
$property: nth($content, 1);
$value: nth($content, 2);
#{$property}: unquote($value);
}
}
}
}

With usage being:

input {
@include placeholder(color red, font-style italic);
}

As with the other one, a Codepen was created to demonstrate the code.

This website is currently having a full content audit - apologies if some of the code or content looks a bit funky!

View this post on Gitlab

You might also enjoy…

  • From Less to Sass

    Posted on 4th February 2014.

    Recently we've decided a change in preprocessor to help optimise our workflow. Within this blog post, I am going to type Sass, but really I mean Scss.

  • Compiling Less on the Command Line

    Posted on 19th October 2013.

    We have been using LESS for a while now, but our process involved including the less.js in the header during development, compiling the LESS using an app before launch and then maintaining the site using the css.

Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.