TalkPHP

TalkPHP (http://www.talkphp.com/forums.php)
-   XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)
-   -   LessCSS (http://www.talkphp.com/xhtml-html-css/5419-lesscss.html)

cachepl0x 05-19-2010 02:33 PM

LessCSS
 
I thought I would share with you all an incredibly amazing tool.

http://lesscss.org/

Basically it is a CSS compiler, that enables you to use variables, functions (mixins) and nesting inside of your CSS. All you have to do is make a file, style.less, edit it using the less syntax (essentially the same as regular css, only better), then run

Code:

lessc style.less
And it will generate a nicely formatted CSS file.

If you want it to update the style.css as you edit the style.less file, run

Code:

lessc style.less --watch
You need to have Ruby installed to run this program.

Here is an example of a .less file I am working with:

http://pastie.org/967642

And here is the .css file it generated

http://pastie.org/967664

I think it's a great too. :3 Hope you all like it as much as I do.


Never mind the use of both hex colors and rgb colors, I am tired and lesscss ends up compiling rbg() into hex colors anyway.

delayedinsanity 05-19-2010 03:40 PM

Isn't this easier to just do yourself when you're writing the CSS, rather than nesting your rules and using a third party application to correct it? I don't think I'm fully understanding the purpose of this utility, and I'll stick with my friend cleancss.com to fix the large bloated files I get from clients. :)

cachepl0x 05-19-2010 06:02 PM

Well, I find nesting easier so I don't have to continuously rewrite certain things. Plus, nesting isn't the only thing in there. You get variables and functions which makes writing CSS infinitely more convenient.

To each their own, I guess. :)

Rhinos 05-22-2010 02:47 PM

It's a good tool but it doesn't generate good CSS files.

Usually something like:

Code:

#header #logo { /* ... */ }
is redundant. You don't need the #header as #logo should only appear once and therefore it doesn't matter what the parent is.

The same for:

Code:

form#post { /* ... */ }
You don't need to specify that it is a form tag because #post should only appear once and so the tag name does not really matter. It also means you could just as easily move the id="post" part to another tag if you need to.

It's a good tool to use though and does make it easier to manage complex CSS layouts. There is also another CSS tool called SASS that is similar to LessCSS but offers some different syntax and features. It doesn't fix the problems I've pointed out but I think over time both these tools will solve some of these problems.

delayedinsanity 05-22-2010 04:34 PM

That's kind of what I was aiming at too - if it doesn't optimize your CSS rules for you, or at the very least try and generate xbrowser compliant code (when for example yours is FireFox-centric) then it just seems like it's adding work instead of taking it off. It's an excellent concept though, maybe they have plans to make it more useful like this.

Aiahoos 10-08-2010 09:02 AM

Thanks it is interesting to play with this tool, but not more, as for me
_________________
Drupal development


All times are GMT. The time now is 07:58 AM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0