Why LESS Hat? We were searching for LESS mixins library that we could use in CSS Hat plugin for exporting Photoshop layer styles into CSS.
We required the mixins to be:
Universal:
If it's possible in CSS, it must be possible to be done with a mixin. Unlimited number of anything, shadows, gradients, gradient swatches.
Cross-browser:
The library should export CSS for all available browsers. Old gradient syntax for iOS4? Totally!
Configurable:
Building a webkit app? Turn off all other browsers and get just CSS3 and -webkit- extensions without the clutter.
We looked at existing libraries, and found out they are not matching our criteria:
Property
LESS Hat
LESS Elements
Compass - Sass
Animations
Unlimited box-shadows
Multiple gradients
Convert new gradient direction to older syntax
SVG gradients for IE9
3D Transforms
Font-face
Multiple transitions
Transition - prefix free
Keyframes
Opacity
Configuration
Turn on/off prefixes for individual browsers. Useful when doing internal project, or mobile app that should only work with webkit.
Config is global for all mixins (see the top of the file) and you can override specific mixins manually (at the beginning of every mixin).
Design considerations
The core feature is unlimited number of CSS properties. Because LESS language is limited in this way (see Stack Overflow), we are wrapping the arguments into a ~"..." block, so that we can push them as a single parameter, and parse it back inside the mixin.
Because of this, every mixin needs to parse it's arguments, and since LESS doesn't allow to add globally available functions, there is a parser inside each mixin. Not a best practice, but necessary. The good thing is that you can just include the mixin library with:
@import "lesshat"; /* OR */ @import "lesshat.less";
and enjoy coding websites again.
FAQ
What is LESS?
Hey, start with official website lesscss.org and learn why it rocks so hard.
What is a good practice to using LESS?
We don't recommended to use LESS directly in your client-side code, because it has to be compiled every time a page is viewed, but for development it's okay. You can use server-side compiling via Node.js or some of desktop apps for example LESS.app - free, Codekit - paid or LiveReload - paid.
How can I use LESSHat library?
Download the library, paste it into your *.less file or import it @import "lesshat";, read the documentation, enjoy your life. :)
How is LESSHat licensed?
LESSHat is available under the MIT and BSD licenses. You are free to use LESSHat without restriction for both open-source and closed-source applications.
Hey LESSHat is uber cool. It really made my day. Thanks!
That's nice. We appreciate it. :) If you would like to support us you can tweet about us or give us some small Flattr donation (Flattr button is at the bottom of the left column).
I find a bug and I would like to report it. Where can I do that?
The best way to report a bug is using the Github issues.
Roadmap
.keyframes mixin for css animation - see proposed syntax below
Prefix free for .transition mixinDONE
Do you have any idea? Leave us a feedback in comment section below or on twitter @CSSHat with hashtag #LESSHat.
Drawbacks
Error reporting in LESS sucks, sorry about that. If you like to know what went wrong when you mistype, use SASS (which CSS Hat does too :)).
.animation
(animation) or (~"animation-1, animation-2, ..., animation-n");
USE W3C syntax. Takes multiple linear and radial gradients, generates CSS for all modern browsers including older webkit syntax (hello, iOS4!) and even SVG gradient fallback for IE9.
