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
Join our newsletter!
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.
ouch.. its only for development :(
Can you tell me how to extract the CSS from the browser ? not able to find the same in Firebug.
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.
there is one major problem with copying the contents of the compiled CSS. The LESS engine is sophisticated enough to only render the relevant browser statement, which means that if you have a gradient mixin, and you try and fetch the code from FireBug, the only line you’ll find is somthing like :
background-image: -moz-linear-gradient(center top , yellow, green);
all the other versions are completely ignored.
does anyone know how to overcome this problem?
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”
Thanks Daniel, and Paul…
this is huge.
and Mark… ;-)
Dreamweaver CS5.5 users also need to do this for C:\Users\\AppData\Roaming\Adobe\Dreamweaver CS5.5\en_US\Configuration\DocumentTypes\MMDocumentTypes.xml
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
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 ?
Thanks in advance.
I enjoy your screencast, quick and effective, you type quite fast and accurately :D
Thanks for this screencast :)
Is anyone having issues with background images? I know there’s been some updates to fix the @import url issue, but “background: url(image.png”);” still doesn’t seem to be working properly. The information on http://github.com/cloudhead/less.js/issues#issue/103 doesn’t seem to address this issue. Any ideas?
I’ve created a thread on the less.js forum for this issue. https://less.tenderapp.com/discussions/problems/61-background-image-issues
Any advice on the situation would be greatly appreciated.
OK, I’m a moron. I was using the version presented in this article. 1.0.18. Version 1.0.35 seems to resolve this issue. Thanks.
Great article, thanks for the help!
Hey, great stuff…but one question,
what coda plugin are you using for the syntax autocomplete in your video (when you are inserting the link rel)?
thx alot!
Hi Jeff
Another great tip. Thanks!
My Question is that what happens when javascript is off. Should Less.app be used for experimentation with .less and once the outcome is as desirable we convert the .less files to .CSS?
Can we create a fallback of some kind so that if JavaScript is disabled at least .CSS will be there to prevent the breaking.
Less.js sure is a time saver though. Thanks for sharing.
even this is only for development, but this is really nice :)
thank
Thanks for this tutorial, Jeffrey.
This finally got me started on LESS after hearing about around the web for the lasts month or so. Another great tutorial. You guys are doing an important job for The World’s web design/development community.
Oh, and thanks for including the classes file. It’s always easier to grasp a concept like this, when you have an example to work from :)
how can I download this video? I click on the link but doesn’t download…I can just see it online.
This plugin don’t work on IE all version !!!!!!!!!
Tremendous ! Amazing discover for me today.
Thanks for your tutorial.
I’ll rework a lot of my CSS stuff and use LESS.
Check out WinLess. (http://winless.org) WinLess is a compiler (with GUI) for LESS. WinLess can watch your LESS files, and automatically compile them when they have changed. If you are using Visual Studio for your projects you should also check out the BuildEventScript of winless.org.
I would advise against using any compiler which doesn’t use less.js to do the actual compiling. less.js is written en maintained by the inventor of LESS, ports like dotlesscss are (as far as I have seen) often buggy and behind on less.js. The tools found on winless.org are based on less.js.
Nice, I was wondering when someone was going to make an app for windows
To make Dreamweaver open and color-code Less files, there are actually three steps.
Don’t modify files in Dreamweaver – use NotePad or TextEditor.
1.Open the MMDocumentTypes.xml file. It’s located in the Dreamweaver application folder at Configuration/DocumentTypes. Add ‘less’ to either the winfileextension or macfileextension attribute, dependent on which platform you are on. Here’s how you modify it for Mac:
Change
macfileextension=”css” to macfileextension=”css,less”
Save the file.
2. Open the Extensions.txt file located in the Dreamweaver application folder.
The first list of comma-separated extensions in the files ends with :All Documents. In that list add LESS, – I add it right after CSS – don’t forget the comma.
Next, find the line CSS:Style Sheets. Modify it to read CSS,LESS:Style Sheets
Save the file.
3. Open Dreamweaver’s Preferences window. Click File Types/Editors. In the Open in Code View field, add .less – note the list items are separated by spaces.
Close the Preferences window. Quit Dreamweaver and restart it.
When you double-click a .less file in the Files window, it will open in Code View and the color-coding and auto-completing will work.