My intro to LESS - If you're not using it, you should be.

http://www.austinkpickett.com/blog/less-code-more-fun/

by phragg • 14 years ago

47 41 14 years ago

austinkpickett.com

Hope most of you are using LESS or something similar (SASS). I've found it to be a dramatic boost in productivity.

Let me know what you think. Thanks.

antihero• 14 years ago

And what if we're using SASS?

phragg2• 14 years ago

:X I wrote up a bit commending SASS/Compass alternatives but was in the [text] portion when submitting and not a comment.

But I'm looking towards learning SASS to write a follow up to this.

cherrypy• 14 years ago

i wrote an intro to SCSS a while back when i was learning it (http://pushkrajdole.com/blog/?p=4). i think, all that matters is what framework you're most comfortable with. Give LESS & SCSS a try when coding some real projects & see which one of them works for you.

mkhalil3• 14 years ago

I removed this comment. Browser problems.

mkhalil3• 14 years ago

Well this is weird. Right click - open in new Tab, its okay. Click on link directly from headline above, black on black. Hmmm...

phragg2• 14 years ago

A bit brash, but if you're referring to the grey text at the bottom on my footer. It's simply that, a footer, and hardly anyone clicks on it, and they shouldn't.

But if you're referring to my overall background being black and then the content BG (white) coming in a bit late-- Sure I was a bit lazy on the code but merely wanted to get this up and running asap.

And no, I don't think you should take my advice because you apparently don't need it. I was simply sharing my post in an effort to expose myself for criticism or web nerds to talk to.

Cheers.

mkhalil3• 14 years ago

I read the article. Good stuff, and well written. Apologizes for being "brash", but this is how it looked when I first went on your website, even after multiple refreshes.

http://i.imgur.com/KVk82.jpg

I thought it was some new hipster theme where you would have to highlight the text to read it. Thankfully I was wrong. :D

kakuri• 14 years ago

Stylus: http://learnboost.github.com/stylus/

http://nylira.com/stylus-the-revolutionary-successor-to-css/

http://designshack.net/articles/css/sass-vs-stylus-who-wins-...

coenhyde• 14 years ago

Stylus is by far my favourite in the series of CSS preprocessors. Stylus is very minimal and more powerful than all.

jeromegn• 14 years ago

Agreed, that LESS post spurred me to write about it (briefly): http://coderwall.com/p/p7suww

ww520• 14 years ago

Less is pretty good. Make CSS much more manageable.

shabble2• 14 years ago

Also, you should consider:

    export LESS=-i -g -M -R -x4 -X -f -F -z-1

for a much happier pager.

RKearney2• 14 years ago

Mind explaining what this does?

DArcMattr• 14 years ago

-i = ignore case

-g = highlight the particular string that's been found by the last search command

-M = verbose prompt

-R = all control characters, 'R' for Raw

-x4 = tabs take 4 spaces

-X = don't reinit the screen when the pager exits

-f = force open any kind of file

-F = end the pager when the end of the file has been reached

-z-1 = use 1 less line for a screen's worth of content

adamt• 14 years ago

Err .... is this some attempt at humour or have you guys commenting about less (the more replacement) here not read the article (about less the CSS framework)?!!

zdw• 14 years ago

Obviously it's a joke. Hackers tend to like jargon jokes.

I'd expect an article about the pre-Christian era world to include similar references like "BC_ENV_ARGS="-q $(echo ~)/.bc"

ralph• 14 years ago

That's missing some quotes; it's trying to set an environment variable called -g, which is an invalid identifier. Mine is

    export PAGER=less LESS='-wiXz-2$j15' LESSBINFMT=.

brokenparser• 14 years ago

Most is even better. Unlike other paging programs, most is capable of displaying an arbitrary number of windows as long as they all fit on the screen, and different windows could be used to view the same file in different positions.

In addition to displaying ordinary text files, most can also display binary files as well as files with arbitrary ascii characters.

shousper• 14 years ago

It'd be good if the major browsers decided to adopt one (or some?) of LESS/Stylus/SASS natively. Then it wouldn't be such a pain to tweak your stylesheets using these..

RKearney2• 14 years ago

I just started using LESS and if you're on a Mac, I highly recommend LESS.app[1] to work with. It will automatically compile your LESS into CSS whenever you save the document in any text editor. Edit and save a page like variables.less that's included in main.less? It will auto-compile main.less, and any other LESS files that include variables.less when you save it.

[1]http://incident57.com/less/

jarcoal• 14 years ago

Go one step further and get the excellent codekit: http://incident57.com/codekit/

It is an essential piece of software in my workflow.

noirman• 14 years ago

I've used LESS for the first time when the project involved Twitter Bootstrap.Never looked back.

The only downside is probably I never get to use my favorite CSSEdit again.

mcot2• 14 years ago

I really like less.js for quick development. Once everything is working, the less code can be compiled and included as regular css.

My toolchain is currently...

python/apache pure json apis server side

knockoutjs/jquery/less client side

This is very powerful, but the semantics of programming are pretty crazy. I have variables and "functions" in my css, data bindings in the HTML, and a massive ammount of js. The js is sometimes hard to structure.

I almost wish there was a single lightweight coffescript style language to replace the big three (HTML/CSS/JS). The "HTML is for documents" idea is already long gone in most of my code.

ericgsmith• 14 years ago

One thing I dislike about less is that the compiler completely destroys whitespace. I think it should only do that if minify is checked, not by default. I don't want my project to be bound to less forever.

danso• 14 years ago

I want to read this post but will have to in the morning...the right margin is broken for the iPad...at least in portrait mode

akldfgj• 14 years ago

How does LESS compare to Google's Closure Stylesheets?

http://code.google.com/p/closure-stylesheets/

"Closure Stylesheets is an extension to CSS that adds variables, functions, conditionals, and mixins to standard CSS. The tool also supports minification, linting, RTL flipping, and CSS class renaming. "

nhebb• 14 years ago

> It’s also extremely important to not keep your less.js file operating during production mode.

I'm curious about this. Is it more than just a minor performance hit?

skrebbel• 14 years ago

That depends entirely on what you call minor. A lot of people on HN think that it's absolutely essential that a page loads and responds within a few milliseconds, because somehow subconsciously to users, it will make the site feel snappier, and thus better, and thus more worth paying for / sticking around on.

Compiling and running LESS on the fly in production might, besides the extended load time, increase the chances for a flash of unstyled content. If this makes you nervous, don't run LESS on the fly in production.

hackmiester• 14 years ago

Not to mention if you run it on the fly, the "flash" of unstyled content will last forever for people with JavaScript disabled!

CCs• 14 years ago

SASS/Compass produces more efficient CSS output.

See the @extend section here: http://css-tricks.com/sass-vs-less/

(Disclaimer: none. I use both, depending on project.)

zampano• 14 years ago

I heard a speaker at a conference say that Sass covered a lot more of the weird CSS edge-cases than LESS, can anyone comment on the validity of that? I've used Sass in Rails but I wouldn't be opposed to checking out LESS if there was a compelling reason to.

egypturnash2• 14 years ago

I was introduced to LESS earlier this year and loved it. When I had to rebuild my personal site this past month, I did it in LESS instead of CSS and probably cut my development time in half.

I'm never going to write raw CSS again.

I grabbed CodeKit, so I might try SASS the next time I'm building something on the web. I haven't really seen anything in the SASS vs. LESS shootouts that makes me go "dang I wish I could do that"; my CSS is relatively straightforward. Just having named colors, a couple color mixing functions, mixins, and nested syntax helped a LOT.

nathos• 14 years ago

@extend is one of the killer features of Sass that other preprocessors don't have: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#ex...

It's true selector inheritance that will change the way you author styles.

dsego• 14 years ago

I started with Less a month ago (because it's used by bootstrap); I was so disappointed to find you could only "inherit" from mixins and classes. Just seems like a reasonable next step to include inheritance from any other selector.

egypturnash2• 14 years ago

Ooh, I can see that being useful. As opposed to features like "you can do loops!" which kinda makes me go "why would I ever want to?".

laktek• 14 years ago

If you want to write LESS, without having to bother about compiling it manually, try Punch project - http://github.com/laktek/punch

nubela• 14 years ago

i'm actually using SHPAML (w/ jinja templating) + SASS (not scss), i find that my html+css looks exactly the same with the same hierachy and actually improves workflow quite some bit.

tsahyt2• 14 years ago

Brilliant! Another workaround fixing something that was broken by design. The things that LESS brings you should really have been there in CSS to begin with.

ZoFreX• 14 years ago

So what? Unless you're sitting on a secret-until-now extension to CSS that fixes the issues with CSS and is available in all major browsers, then we need these "workarounds" (like SASS and LESS). Or are you proposing that since it is "broken by design" we all stop using CSS full stop and go back to un-styled raw HTML?

tsahyt2• 14 years ago

I never proposed that, I was pointing out a flaw and I hope that this issue will be fixed one day.

My intro to LESS - If you're not using it, you should be.

Related Stories