It was just a few weeks ago when I heard of LESS for Ruby, and now there a port for .NET developers: .less (dot less).
One of the frustrating aspects of working with CSS (one of many, actually) is the amount of duplication in a .css file. CSS does allow us to separate content from presentation, but, if I had a nickel for every time I did a search and replace for some hexadecimal RGB code replicated 5 times in a CSS file, I’d buy each of you an interactive t-shirt.
.less help to keep your CSS files DRY using 4 constructs:
The examples on the .less home page are self-explanatory. For example, variables:
@gold : #cccc99;
body {
background-color: @gold;
}
“Mixin” is a Ruby concept, and with .less the you can “mix” one style rule “into” another.
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#header {
.rounded_corners;
}
You enter your styles into a file with a .less extension and include them in a view or web form just like any style sheet.
<link href="/Content/Site.less" rel="stylesheet" type="text/css" />
An HTTP handler is configured to respond to requests for the .less files.
<httpHandlers> <add validate="false" path="*.less" verb="*" type="dotless.Core.LessCssHttpHandler, dotless.Core" /> </httpHandlers>
When a request arrives for a .less file it is the handler’s job to parse the .less file and transform it into standard CSS rule sets. .less does this using PEG Lib and offers the ability to both minify and cache the resulting CSS.
The source code is available on GitHub, so check it out for yourself. .less will let you write lean, mean style sheets.
Comments
BTW: Your first link to .less is the same as to LESS for ruby - it should be http://www.dotlesscss.com/ :)
Greets, Gordon
Ruby's implementation generates static css files that are served up by the webserver.
So my question is - aside from runtime file generation, what other benefits exist from the approach?
blog.smoothfriction.nl/...
Summary:
It's quicker, easier to deploy for a .NET dev.
@Joel, @Steve - I can't imagine this would be too difficult with T4, or even a custom MSBuild step. I might look at it, unless they get to it first.
- Not everyone in the .NET sphere will/can install Ruby on their dev machines.
- The ruby impl has trouble parsing Less files created in VS so they need to be built in some other editor.
- We want to adhere to the Less syntax as much as possible, but we are now at a point where we can take things further.
@Joel, @Steve With regards to the HttpHandler, the DotLess projects comes with an executable that allows you to create CSS from an input file so hooking this up to a build scripts should be a 10 min job.
I do have to say however, that as the HttpHandler supports caching then your not loosing anything much performance wise.
Additionally, we are looking to add the ability to pass query string parameters(and environmental info) to the handler to be used as variables in the Less file.This obviously woludnt be possible as a static compilation step.
class="span-15 prepend-1 colborder"
Using Less/DotLess you can merge these in to something more meaningful.
Also mix-ins can be used to bring in sections of nested rules with namespaces i.e:
.outer{
content:"ignore me";
.inner{
content:"mix me";
}
}
#mixer{
.outer > .inner;
}
Also mixins with variables are coming that will allow things like:
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}
But I myself still don't think of Less as a complete CSS replacement and tactics that are good with CSS are still valid. Here's my thoughts:
enginechris.wordpress.com/...
This really should be in the CSS standard so CSS editors don't panic with the @var statements.
intellisense would be probably for mixins/variables at first, as that's what you'd like to be able to lookup easily.