LESS3 is an extension to LESS to allow you to start using CSS3 properties today. But not merely that. It is becoming increasingly popular to design your app or site in the browser without working in photoshop. This is becoming easier with CSS3 properties like box-shadow, border-radius and gradients. To know more about this topic, I recommend reading Megan Fischer's amazing article about it.
This approach is in some ways amazingly liberating and speeds up things considerably. However when the time comes that you have to make sure that your design works in most browsers - the boring part begins and you have to actually create your gradients in Photoshop, add three times the code for every possible vendor prefix and workaround rgba incompatibility.
How does LESS3 help you?
It includes intelligent mixins that abstract most of these boring parts away for you. I recommend to still check how your site looks in legacy browsers, however it will do most of the heavy lifting for you. Let's look at some examples:
First you have to import less3:
Then you can start using the mixins.
The postporcessor is a Macruby script in the
utils directory. It is meant to be used mainly in the phase of making sure that your design works in all browsers. As you will see, it analyzes your (compiled) stylesheets and creates images and IE stylesheets and other recommendations to make this task much less of a pain.
You can run it by this command
macruby utils/postprocessor.rb <path to stylesheet 1> <path to stylesheets 2 ...>
Currently this will only work on 10.6 Macs (also remember to get the latest Macruby and HotCocoa), however if anyone finds a way how to do this in a cross-platform way then please fork and send in the patch.
Instead of writing:
background-color: rgba(20, 30, 120, 0.8);
.background-color(rgba(20, 30, 120, 0.8));
which produces backwards-compatible code:
background-color: #141e78; background-color: rgba(20, 30, 120, 0.8);
The same works with color and border properties.
Use this helper if you want to set a background to a rgba value but you don't want to set a background image or gradient. This will add similar declarations to the above mentioned
.background-color, but also adds a
background: -postprocessor-rgba-bg(rgba(...)); declaration. The postprocessor will turn that into a data-url 1x1 pixel rgba png image that is tiled on the background. This adds support for older Firefox and Opera browsers (and IE8). However for older versions of IE you will need the step above.
-khtml-border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Also included is the shortcut for specifying all of the corners differently:
.border-radii(3px, 5px, 8px, 1em);
-moz-border-radius-topleft: 3px; -khtml-border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 5px; -khtml-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomleft: 1em; -khtml-border-bottom-left-radius: 1em; -webkit-border-bottom-left-radius: 1em; border-bottom-left-radius: 1em; -moz-border-radius-bottomright: 8px; -khtml-border-bottom-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
Imagine having to type all that by hand. Phew.
.box-shadow(0, 3px, 5px, rgba(0,0,0,0.2));
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
We support the following properties of the multi-column layout module:
.column-rule(width, type, color);
Use as you would expect, just remember to put commas between arguments.
-webkit-transform: rotate(4deg) translate(100px); -moz-transform: rotate(4deg) translate(100px); -o-transform: rotate(4deg) translate(100px); transform: rotate(4deg) translate(100px);
transform-origin is also supported via
Apparently CSS3 transitions are appearing in Firefox 3.7 so now they are in LESS3 via
.transition-property(top); .transition-duration(3s); .transition-timing-function(ease-in);
-webkit-transition-property: top; -o-transition-property: top; -moz-transition-property: top; transition-property: top; -webkit-transition-duration: 3s; -o-transition-duration: 3s; -moz-transition-duration: 3s; transition-duration: 3s; -webkit-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in;
Also the shorthand
.transition() is supported per spec.
Since gradients are such an important part of the design, one cannot accept that most browsers won't render them. So I have decided to create a workaround. Use either the general purpose .linear-gradient:
.linear-gradient(@start_position:left bottom, @end_position: left top, @percentage_where_to_start_color1:0.70, @color1:rgba(0,0,0,1), @percentage_where_to_start_color2:0.80, @color2:rgba(255,255,255,1), @fallback_image_width:100, @fallback_image_height:100)
Or the specialized helpers
.vertical-gradient, where you generally don't have to fool with the directions and are generally recommended.
This will produce correct incantations for Gecko and Webkit browsers. It will also produce this weird -postprocessor-linear-gradient incantation. This should not disturb you while designing in your favorite browser (unless your favorite browser is Internet Explorer in which case this project is not for you). The postprocessor will replace all
-postprocessor-linear-gradient with a
url() statement that links to an image that the script helpfully generates for you. Note that gradients should be specified only with rgba color (a limitation I plan on removing).
Previewing less fortunate browsers
Of course you can actually fire up a bizzare browser and test in there, but this may be inconvenient for some reason (eg. you're on a Mac).
If you just instead of
@import 'css3'; write
@import 'css3-crippled';: All of the mixins will include only the backwards compatible code (or none as with
Also, Patches accepted ;)