84hlga
Last Updated: February 25, 2016
·
4.188K
· mikestreety
C9e9e78b72d829bc4052f361eaf38254

Advance mixin with Less && SCSS- Variable attributes

I had a dilema 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.

Edit: I have added the SCSS alternative below

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 Joao 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);
}

You can see it in action on Codepen. Suggestions and changes most welcome!

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.

Say Thanks
Respond

1 Response
Add your response

15903

And again, SASS shows its advancement and beauty. A for-each loop nicely done in CSS, how cool is that? Whereas in LESS we have to actually write MORE code, to achieve the same. Let alone the additional work needed to maintain the LESS-mixin.

Other than these religious views, a nice little post to show how to construct advanced mixins to do things. : ) Thanks for that!

over 1 year ago ·