All of the CSS3 fun, none of the prefixes!
LESS Prefixer is a set of LESS mixins that let you use vendor-prefixed CSS properties without the prefixes. It uses some simple convetions and gets out of the way so you can use the CSS you already know, but with less typing.
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.
A whole bunch. There is a nice Table on Contents in the file so you can look this up quickly while working in your project. Everything is even alphabatized.
- .animation(@args)
- .animation-delay(@delay)
- .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) *
- .opacity(@factor)
- .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)
Credit to LESS Elements for the motivation and to CSS3Please.com for implementation.