Some of us may have heard of such services as LESS (Leaner CSS) and Sass (Syntactically Awesome Stylesheets), but not many would have had a chance to use them. LESS was originally built with Ruby and allowed us to use variables, operators, mix-inx and nested selectors to construct our CSS.
LESS has recently been completely rewritten in JavaScript and will, eventually, become LESS 2.0. It will be able to run directly in the browser, as well as on the server, with node.js (which I am not going to cover here).
LESS.js is not yet a complete product, but does work great and is something we can already utilise for building our CSS.1:<link rel="stylesheet/less" href="styles.less" />
Note that we’ve set the rel attribute to "stylesheet/less", and that our actual stylesheet has an extension of .less, not .css. Also, we must link to this stylesheet before Less.js.
Step 2. Reference LESS.js1:<script src="less.min.js"></script>
Current version of LESS.js is at http://lesscss.googlecode.com/files/less-1.0.18.min.js, so you can use that in scr= above.
Now that we have LESS.js enabled, we have access to all the cool features such as variables, operators and nested selectors.
Here is a quick example of what we can do with LESS.js.1:/* Variables! */ 2:@primary_color: green; 3: 4:/* Mix-ins are like functions for commonly used 5:operations, such as apply borders. We create 6:variables by prepending 7:the @ symbol.*/ 8:.rounded(@radius: 5px) { 9: -moz-border-radius: @radius; 10: -webkit-border-radius: @radius; 11: border-radius: @radius; 12:} 13: 14:#container { 15:/* References the variable we created above. */ 16: background: @primary_color; 17: 18:/* Calls the .rounded mix-in (function) that we created, 19:and overrides the default value. */ 20: .rounded(20px); 21: 22:/* Nested selectors inherit their parent's selector 23:as well. This allows for shorter code. */ 24: a { 25: color: red; 26: } 27:}This example demonstrates how we can centre content:
1:.centered(@width: 500px, @height: 500px) { 2: position: absolute; 3: width: @width; 4: height: @height; 5: top: 50%; 6: left: 50%; 7: margin-left: @width/2 * -1; 8: margin-top: @height/2 * -1; 9:}
Obviously, none of the above will work if JavaScript is disabled, since it is parsed with LESS.js. But if you implement and preview the examples above, you will see that the result is pure CSS, which you can then copy and paste into a CSS file. So it would be best to use LESS.js during a cutup/development stage.
LESS.app (Mac)
If you are concerned about having to use JavaScript within your HTML you can use LESS.app to compile your LESS files into CSS files automatically, as you save them.
less.tmbundle (TextMate for Mac)
Alternatively, instead of using LESS.app, which will need to be running in order to compile and save .less files as .css from TextMate, we can install the LESS TextMate Bundle, which will also add CSS syntax highlighting to .less files and parse them to .css files on save (command + S).
To install the bundle follow these guidelines:
1. Open Terminal.app and run the following:
1:sudo gem install less2. Download the Bundle from here (Download Source button in the top right corner). UnZip or UnTar the downloaded file.
3. Open the "appden-less.tmbundle" folder where you will find two folders "Commands" and "Syntaxes". Each folder contains a file which installs a bundle. Run both. TextMate will be started if it wasn't already running. Once both bundles are installed, in TextMate click on Bundles -> Bundle Editor -> Reload Bundles. DONE!
From now on, if you create a .less file and edit it in TextMate, saving it will compile and generate the .css file for you automatically.
Anton,
im sorry I didnt mention that in the first post.
Actually Im on Snow Leopard.
Thanks,
Tom