Quick Tip: You Need to Check out LESS.js
Tutorial Details
- Topic: Faster CSS
- Technology: JavaScript
- Estimated Completion Time: 4 Minutes
You might be familiar with such services as LESS and Sass. They allow for far more flexibility when creating your stylesheets, including the use of variables, operators, mix-ins, even nested selectors. However, because LESS was originally built with Ruby, a lot of PHP developers, despite the fact that there are PHP versions available, never used it.
That’s all going to change now that LESS is being rewritten in JavaScript, is about forty times faster than the Ruby version, and can be used by any of us!
Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?
Step 1. Reference LESS.js
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>
Step 2. Import a Stylesheet
<link rel="stylesheet/less" href="style.less" />
Note that we’ve set the rel attribute to “stylesheet/less,” and that our actual stylesheets has an extension of .less, not .css. Also, we must link to this stylesheet before Less.js.
Step 3. Have Fun!
With this minimal amount of work, you now have access to everything from variables to mix-ins. Be sure to watch the four minute video tutorial above for full examples, but here are a few quickies.
/*
Variables!
*/
@primary_color: green;
/*
Mix-ins are like functions for commonly used operations,
such as apply borders. We create variables by prepending
the @ symbol.
*/
.rounded(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#container {
/* References the variable we created above. */
background: @primary_color;
/* Calls the .rounded mix-in (function) that we created, and overrides the default value. */
.rounded(20px);
/* Nested selectors inherit their parent's selector as well. This allows for shorter code. */
a {
color: red;
}
}
It’s important to remember that LESS.js isn’t finished; hopefully, it will be soon. Nonetheless, it’s working wonderfully so far. What do you think?
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
Cloud Networks Australia - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Does anyone know if there is a port of blueprint or 960 frameworks for less (as in replacing classes with mixins), similar to compass being a port of blueprint to sass, I like less better as a language, but the really nice thing is being able to use a framework without presentational class names
Awesome, thanks for pointing this out, Jeffrey! I’ve used Less for Rails projects but groaned about not having it really accessible when working on WordPress, Drupal, etc. That’s really cool that you can just link to the .less stylesheet instead of needing to compile it all the time like the gem version. I’ll have to try this out soon.
I also like Compass with Susy — Susy doesn’t seem to get much recognition, but it’s quite good in terms of grid tools. Less.js + Susy might be interesting.
coo!
HI!
Great tutorial, I have 2 questions though.
If you could compare this tool to pure CSS which is faster in terms of page loading?
What if user has JS disabled? Does it render CSS?
Thank you!
The CSS is produced after compilation so if you are worried about the actual production speed of a site, just use this for development and come release time just copy the generated CSS from your browser into you stylesheet.
+1, LESS is really nice.
I just wanna say WoW!
is it safe to start implementing this on all our websites.
does it have browser’s compatibility issues?
page load time difference?
any thing to consider before starting to adopt this amazing solution?
this is a really cool idea, but i think i prefer sass mainly because of compass which automatically compiles the source but more importantly allows you to use blueprint css presentational classnames as mixins
How can I output the resulting “real” CSS code? I don’t want my CSS to be created with JavaScript on the client side.
I’m just wondering if this would work with a minified .less file?
I spent all day yesterday experimenting with Less and I think it will completely change the way I code. I was put off before when I read about compiling css files etc. but this is so easy.
I don’t understand why so many people are missing the point. Just preview your page in the browser and view the source. It outputs standard css, you can simply copy and paste the css and remove the javascript from your site once you have finished development.
Use this as a development tool, not as an active script on a live site
Maybe because the heading in the page on the video says that “less will make CSS obsolete” which is obviously untrue and is pretty misleading since it’s really only a development tool and not a live production replacement for standard CSS.
i really like the less.js but again if you check you page using less.js wiht yslow or google page speed it will give you message put js at bottom and css at top here we have to put less.js any cost on top and it is putting internal css not any external file it will increase your pages size where now a days page speed and size also matter as you are removing some html tag elements in video using HTML5, again to use less you have good knowledge of CSS, and you have learn less with css, and less for programmers not for designers
another thing in you new video on youtube you show less compiler but its for only Mac dose anybody has less compiler for windows
Why would someone create a googlecode project just to host files that are already on github? lol
Nice tutorial.
Step1 and Step2 are the wrong way round.
#Container{
a{ color: red;}
a:hover { color: green }
}
You are repeating the “” tag here. Most version of less support ampersant so you can do:
#Container{
a{
color: red;
&:hover { color: green }
}
}
You can ofcourse also use it to be more specific in your CSS code.
Seems my formatting got destroyed and my “” tag got removed.
Thank you good sir, for sharing the ‘&’ prefix to pseudo selectors. Saved my day!
A practice that I will do. I’ll write the code in less, when I finished I copy the code in firebug template.css done and pinch. The case would be less in a file for editing css. The best practice to be made if the less.
I really like the idea of using Less… but I also really like the autocomplete that comes with Dreamweaver when I’m coding css.
Is there a program that does autocomplete with .less files just as dreamweaver does with .css files?
actually, i found the way to make dreamweaver act as if a .less file is a .css
pretty simple:
You have to change the file [Path-to-dreamweaver]\configuration\DocumentTypes\MMDocumentTypes.xml
and add this:
that’s it, worked like a charm!
Add what ?
1. Go to [Path-to-dreamweaver]\configuration\DocumentTypes\MMDocumentTypes.xml and find the line where it defines the CSS documents File Types / Editors and add “.less” at to the “Open in code view” list.
3. Make windows associate .less with Dreamweaver by opening it, selecting Dreamweaver and checking “always use it for this type of file”
Not sure if in Less.js you can use filename.less.css. Some version of less support this so you can fool your editor that you are doing CSS.
/* <style$gt; */ will fool DW
sorry for the repost:
/* <style> */ will fool DW
I’ll stick with my trusty HAML/SASS/Compass combo, but thanks anyway
I just prefer the old whitespace sensitive SASS syntax – and speed is really not an issue here. 40 times faster makes it what, 200ms faster? This is a development technique, so it’s not really an issue unless you’re schedule is depending on those 200ms, hehe 
This is really good post , I am going to use this method for my next psd slicing job . Is there any good plug in to work with LESS in a IDE ?
Can you share your coda color schemes
?
If you’re using LESS.js with the intent to convert your code into standard CSS for deployment, then check out LESS.app: http://incident57.com/less/ It uses the same LESS.js to automatically compile your .less files into .css every time you save them.
There is also a Coda plugin (which formed the base for the app):
http://incident57.com/coda/
Here goes a nice function to center objects:
/* absolute positioned object using width and height */
.centered(@width: 500px, @height: 500px, @topreducement: 0) {
position: absolute;
width: @width;
height: @height;
top: 50%;
left: 50%;
margin-left: @width/2 * -1;
margin-top: @height/2 * -1 – @topreducement;
}
I can’t keep up! Just recently getting back into design after about 7 years of no coding and just as soon as I get done getting an average to good grasp on css itself, BOOM! Sass, Less, 12 other things to learn. I have sites to develop and a family to spend time with!
well i think that we can do something like that with PHP and .htaccess isn’t that right???
And thanks