Quick Tip: You Need to Check out LESS.js

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.

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!

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

I’m just wondering if this would work with a minified .less file?

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

#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.

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?

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.