My intro to LESS - If you're not using it, you should be.(austinkpickett.com)
austinkpickett.com
My intro to LESS - If you're not using it, you should be.
http://www.austinkpickett.com/blog/less-code-more-fun/
43 comments
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-...
http://nylira.com/stylus-the-revolutionary-successor-to-css/
http://designshack.net/articles/css/sass-vs-stylus-who-wins-...
Stylus is by far my favourite in the series of CSS preprocessors. Stylus is very minimal and more powerful than all.
Agreed, that LESS post spurred me to write about it (briefly): http://coderwall.com/p/p7suww
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.)
See the @extend section here: http://css-tricks.com/sass-vs-less/
(Disclaimer: none. I use both, depending on project.)
Also, you should consider:
export LESS=-i -g -M -R -x4 -X -f -F -z-1
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)?!!
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"
I'd expect an article about the pre-Christian era world to include similar references like "BC_ENV_ARGS="-q $(echo ~)/.bc"
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=.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.
In addition to displaying ordinary text files, most can also display binary files as well as files with arbitrary ascii characters.
Mind explaining what this does?
-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
-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
Thanks, I should probably have actually mentioned what it does initially :)
Couple of minor points:
-F is actually 'quit immediately if the input is less than 1 screen-worth of text'. It means you can just pipe any old thing into it, and if it's only a couple of lines, you don't have to quit manually.
-e/-E is the 'quit when reaching input EOF', with a nice little trick that -e only quits the second time you reach EOF, so you can go right to the end of the file, and to quit just hit space or whatever to seek further.
The other thing is:
Couple of minor points:
-F is actually 'quit immediately if the input is less than 1 screen-worth of text'. It means you can just pipe any old thing into it, and if it's only a couple of lines, you don't have to quit manually.
-e/-E is the 'quit when reaching input EOF', with a nice little trick that -e only quits the second time you reach EOF, so you can go right to the end of the file, and to quit just hit space or whatever to seek further.
The other thing is:
-R : Like -r, but only ANSI "color" escape sequences are
output in "raw" form. Unlike -r, the screen
appearance is maintained correctly in most cases.
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. "
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. "
And what if we're using SASS?
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.
: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.
But I'm looking towards learning SASS to write a follow up to this.
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.
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.
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/
[1]http://incident57.com/less/
Go one step further and get the excellent codekit: http://incident57.com/codekit/
It is an essential piece of software in my workflow.
It is an essential piece of software in my workflow.
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.
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.
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.
@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.
It's true selector inheritance that will change the way you author styles.
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?".
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.
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.
If you want to write LESS, without having to bother about compiling it manually, try Punch project - http://github.com/laktek/punch
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.
The only downside is probably I never get to use my favorite CSSEdit again.
> 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?
I'm curious about this. Is it more than just a minor performance hit?
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.
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.
Not to mention if you run it on the fly, the "flash" of unstyled content will last forever for people with JavaScript disabled!
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..
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.
Less is pretty good. Make CSS much more manageable.
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.
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?
I never proposed that, I was pointing out a flaw and I hope that this issue will be fixed one day.
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
I removed this comment. Browser problems.
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.
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.
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
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
Well this is weird. Right click - open in new Tab, its okay. Click on link directly from headline above, black on black. Hmmm...
Let me know what you think. Thanks.