another day and head is clearer.. am a little excited now I see more possibilities
We can all play along/try it out if you like, using
LESS.js [lesscss.org], no Ruby, gems, or PHP required - though LESS does a PHP port if you fnd you like/use it.
Less uses the "newer" syntax, the one with brackets and semi-colons. the same as what we are used to - a 20min learning curve approx. LESS I think is Scss in Ruby. Sass relies on whitespace for it's nesting, so the LESS way is more intuitive coming from CSS :) - The syntax is like this *I think* because it's the closest to a proposed format should any of these benefits ever get incorporated into CSS itself.
Less JS is easy to play with as it only requires 2 lines in the head element of your page and then it compiles in the browser - the
LESS site [lesscss.org] itself uses it in production and I can't say as I noticed a performance hit, apparently the CSS is cached as normal after the first hit, only changing when a less file is changed, and even then JS is much faster than server-side processing - though if hesitant about relying on JS for CSS, you could take the compiled CSS from development and copy/paste it to a static .css for use in production sites rather than rely on JS in production environment
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="http://lesscss.googlecode.com/files/less-1.0.41.min.js" type="text/javascript"></script>
the stylesheet must come before the script, have a .less extension and note the
rel="stylesheet/less"
bit.
write the less syntax in the less file (or multiple files), view in the browser.. from there using your favourite web dev tool you can view/copy the actual generated CSS
I've found much more tutorials and info for LESSCSS :), I take from what I've read so far that this might be a preferred development tool for non Ruby apps, because it can be/is being used by much more people for their own development, big or small, a lower barrier to entry if you like
Certainly an advantage to the LESS way, because it uses existing syntax, is that you could just "convert" part of your existing stylesheets as you learn, or want/need to - just copy your existing stylesheet into the LESS file to start with and change little bits at will ;)
You could also use this to merge lots of smaller sheets into one for production, using @import
Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. If the file is a .less, the extension is optional:
@import "library";
@import "typo.css";
this could mean you/your workshop have multiple sheets for development, even your own wee Library of regularly used snippets, i.e. separating structure, typography, menus etc. but they will compile to one sheet for you keeping the page's http requests to a minimum on production site. obviously the whole point of ScSS/Compass is the same except the compilation takes place server side, though to get started you would need to convert any existing CSS to Sass first, btw.. really not sure about the performance issue of Sass/Compass compared to pre-compiling - it might be something else to consider..
You could also import existing CSS frameworks and use their classes as mixins if that's your thing, a great example is your reset, if you use one, just make a .css file with your preferred reset and @import (include) it into all your .less projects.
I think Compass comes with some common frameworks built in? however for any LESSer mortals just save the framework CSS, import it into you .less file and use their class name as a mixin, or of course build your own preferred one ;)
Designshack has a mini-tutorial on making a LESS Grid [designshack.co.uk]
You can also reuse variables(or constants :o) no matter the order of the imports, however even in just a test scenario with 3 imported LESS sheets - I quickly got lost as to which sheet was providing my headings with their color!
I think the downside is that it will actually produce sheets with a lot of unnecessary CSS (especially if importing common frameworks) shorthand properties couljd fall into disuse, but the time to actually produce the sheets would reduce and if compiled into one sheet, page speed should also improve, even if the file has extras, if the alternative is multiple sheets.
My original concerns, about maintenance remain, however anyone new coming along, or the client, would in effect be debugging/amending the plain vanilla CSS sheet and needn't care how it was actually produced!
--
sorry
whyyi, I think I may have gone off the topic of your question, but maybe not, I'm coming around to thinking that Sass syntax itself may not be a good idea, because of the learning curve of it's differences, remembering to not use the "hard tabs" and to insert 2 spaces for it's whitespace rules and remembering to drop the semi-colons.. but Scss might be OK as long as it's syntax is in line with the others?
Used with Compass it certainly offers the advantage of precompiling built in as well as some pre-built libraries(which may or may not be an advantage!
MAybe the fact that it's Ruby based and a lot of designers/coders (well me!) are afraid of the terminal/command line or don't have a Mac, or can't do a one click install on their windows box.. kind of made it slow on the uptake? I certainly see more people raving about LESS.js
it's certainly interesting.. I might convert one of personal sites or try to template a few layouts to see how easy it is to reuse! Hope you don't mind me rambling.. I like finding "new to me" things
