Tigraine

Daniel Hoelbling-Inzko talks about programming

New stuff in .less

Do you remember that little project I am involved in? That .less thingy I always forget to write about? Well, it’s still around and we are going very strong. We are seeing a decent amount of activity on our mailing list and people throw code at me at various occasions for fixing different problems within the the project.

One of those persons is James Foster, a really nice guy from the UK with some mad programming skills who set out to make .less awesome. Well, he sort of did already, by contributing some major code changes to the .less parser that enabled him to port over some SASS functions to .less. Sadly he does not blog himself, so the honor is mine to report to the world what he did.

Color functions

Before going into details, the main idea is that you are now able to modify any component of a color separately. So far .less has only supported arithmetic operations on colors (like #abc000+ #000def => #abcdef) so if you e.g. want to darken a color while adding 10 points of green to it you where out of luck, making the feature not really all that useful. Well, thanks to James now we can!

Creating colors

.less understands that #FFFF is supposed to be treated as a color, so if you start working off web colors you can just use the hex notation and ignore the following functions. In case you are more the designer type settled in the RGB world and want to have lightness and alpha around, you will need functions to create the colors. And while at it James also added color literals so .less detects a @color: blue; instruction just like it would a @color:#0000FF one. Anyway, if you have your colors RGB or HSL you need to use the following functions to create them:

rgb(red, green, blue) rgba(red, green, blue, alpha) hsl(hue, saturation, lightness) hsla(hue, saturation, lightness, alpha)
You might guess from the parameter names how they work. But to be thorough:
@mainColor: rgb(0, 0, 255); //Blue
Modifying colors

Now, once you hold on to a variable that contains a color you can do some pretty exciting stuff with the following color manipulation functions:

red(color, value) green(color, value) blue(color, value) hue(color, value) saturation(color, value) lightness(color, value) alpha(color, value)

the value can be positive or negative, for instance, to darken a color by 20% you can use "lightness(color, -20%)".

You pass in a color and then the amount you want to change it. If you omit the change value part the method will return the appropriate component of the given color (meaning: red(@color) will return the red portion of that color, while red(@color, 10%) will increase the amount of red by 10%).

And while at it, James also added some convenience functions for good measure to make your day easier:

greyscale(color) this is equivalent to saturation(color, -100%)

complement(color) this is equivalent to hue(color, 180)

mix(color1, color2, weight) mixes 2 colors together. The weight argument is optional and specifies the percentage of the first color to use compared to the second color. it also takes into account transparency - if a color is more transparent it has less effect on the resulting color.

You can get all of that functionality through the latest .less build from our website http://www.dotlesscss.com or just grab the code from GitHub. If you have any questions or suggestions feel free to participate through our mailing list.

And lastly, let’s give credit where credit is due: Thanks to James for the great work he put into .less. James himself stated that he based most of his work on stuff he saw on the Sass project, you can read about their color functions implementation here: Powerful Color Manipulation with Sass. The initial code for Sass was created by Chris Eppstein for the “compass-colors” project which has now been merged into the main Sass codebase. You can also see his pretty impressive demo here: http://chriseppstein.github.com/compass-colors/

dotless Presentation slides from Barcamp Klagenfurt

I just finished my presentation about dotless at Barcamp Klagenfurt and promised to upload my presentation slides to Slideshare.

The feedback for the talk was quite good. Turned out better than I hoped. I just hope that the slides do make some sense without me talking alongside.

Disable AutCrlf in MsysGit!

Ok, today I got this really cool pull request from Jon Galloway for .less. He did some improvements to the T4 Template for .less so that it will run the template on every build if you want that, or that Visual Studio opens up .less.css files. Cool stuff, and thanks a lot Jon! Of course I quickly looked through the changesets and then went ahead and committed it, but I noticed one novice mistake many people run into with MsysGit on Windows.

image

I am pretty sure Jon only changed a few lines of code, yet the changeset logs every file in the document as changed, thus making it pretty unreadable. This happened to me a lot when I started out with GIT, and finding the solution to this wasn’t easy either. So here is how to fix your MsysGit.

This is caused by a little setting called core.AutoCrlf that is set in MsysGit by default to true. MsysGit will then go ahead and localize the line-ending depending on what machine you are running on. This happens on checkout, so even with abolutely zero changes to the repository you’ll see a lot of local changes where there haven’t been any.

Needless to say how stupid this setting is, it only generates a ton of useless insertions and deletions while sticking to the pipe dream that everyone on the team will use the same tools to generate consistent line feeds (I’ve even had issues with only Windows machines and this setting).

Now the solution to this is rather simple:

image

By running “git config –global core.autocrlf false” you disable this and the text files will not get changed upon checkout. This now means that Visual Studio will maybe ask you to fix inconsistent line endings when opening a file, but it is still better than having your source control screw you over upon checkout.

Filed under programmierung, git