LESS Prefixer

{
property
-o-property
-ms-property
-moz-property
-webkit-property

LESS Prefixer is a set of LESS mixins that let you use vendor-prefixed CSS properties without the prefixes. It uses some simple conventions and gets out of the way so you can use the CSS you already know, but with less typing.

Download

view on github

How it works:

As a rule, you can use the CSS properties you would expect just by adding a '.' to start them and putting arguments afterwards.

So you type this:

div {
    .box-shadow(0px 0px 10px rgba(255,0,0,.5));
}

and you get this through the beauty of LESS:

div {
    -webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5);
    -moz-box-shadow: 0px 0px 10px rgba(255,0,0,.5);
    box-shadow: 0px 0px 10px rgba(255,0,0,.5);
}

The convention is simple: when shorthand is available, arguments are not parameterized. Learn CSS, not LESS Prefixer

You may notice that not all vendor prefixes are included. This is not a mistake! Not all vendor prefixes are needed for each property. LESS Prefixer uses the necessary prefixes for each property as demonstrated by CSS3Please.

What's included

A whole bunch. Basically any CSS property that needs to be prefixed and is supported by a reasonable number of browsers. There is a nice Table of Contents in the file so you can look this up quickly while working in your project. Everything is even alphabetized.

  • .animation(@args)
    • .animation-delay(@delay)
    • .animation-direction(@direction)
    • .animation-duration(@duration)
    • .animation-iteration-count(@count)
    • .animation-name(@name)
    • .animation-play-state(@state)
    • .animation-timing-function(@function)
  • .background-size(@args)
  • .border-radius(@args)
  • .box-shadow(@args)
    • .inner-shadow(@args) *
  • .box-sizing(@args)
    • .border-box() *
    • .content-box() *
  • .columns(@args)
    • .column-count(@count)
    • .column-gap(@gap)
    • .column-rule(@args)
    • .column-width(@width)
  • .gradient(@default,@start,@stop) *
    • .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2[,...) *
    • .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2[,...) *
  • .opacity(@factor)
  • .text-shadow(@args)
  • .transform(@args)
    • .rotate(@deg)
    • .scale(@factor)
    • .translate(@x,@y)
    • .translate3d(@x,@y,@z)
    • .translateHardware(@x,@y) *
  • .transition(@args)
    • .transition-delay(@delay)
    • .transition-duration(@duration)
    • .transition-property(@property)
    • .transition-timing-function(@function)

Github

Credits

Credit to LESS Elements for the motivation and to CSS3Please.com for implementation.

LESS Prefixer was built by Joel Sutherland with help from Josh Lockhart and is supported by New Media Campaigns.