Sooo I’m in the process of constructing a new layout for Giantpaper (that may not see the light of day for a while now). I’ve been using LESS for it, once I saw how it seems to have been made for people like me (who get lost in a sea of code easily).

Example 1: I am a human, not a robot

I am also using a bunch of CSS3 rules in the new layout. Rules that are not completely supported in most modern browsers (so you would have to deal with the prefixes like -moz- and whatnot). Eventually, they will be supported by most modern browsers, leaving you to clean up the crap you had to insert to get it to work! :O

And so, to fix that, I used LESS’s mixins (which look kinda like CSS classes and sometimes functions, depending on whether or not you want to use parameters with it). So this hairy beast of a code? (which I got thanks to CSS3Please)

background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);

Can be used like this at the top of your stylesheet.

.gradient (@color1, @color2) {
 background-color: @color1;
 background-image: -webkit-gradient(linear, left top, left bottom, from(@color1), to(@color2));
 background-image: -webkit-linear-gradient(top, @color1, @color2);
 background-image: -moz-linear-gradient(top, @color1, @color2);
 background-image: -o-linear-gradient(top, @color1, @color2);
 background-image: linear-gradient(to bottom, @color1, @color2);
 }

And in the CSS selector where you want to use the background gradient:

div {
 .gradient (#abb7d6, #c8cae6);
}

(Also helpful if you’re experimenting with colors on an actual webpage and don’t want to have to go through and change each color to the new one! Huzzah!?)

Protip: To feel less like a robot, on the CSS3Please site, replace the hex codes/margin/padding/borders and anything else you want to customize with the parameter name. So in the example above, #444444 became @color1 and #999999 became @color2. The site won’t yell at you if you enter in a non-valid value, it just won’t show up on the test box on the upper right of the page.

Example 2: Nesting

A blob of code like this:

div .thing {
      background: #fff;
}

Can turn into something like this:

div .thing {
 background: #fff;
      a {
          font-weight: bold;
     }
}

Ayups.

Example 3: Mixins…a distant relative of classes

The mixins look a lot like CSS classes. In fact (except in certain cases), they can be used interchangeably, which helps cut on some unneeded bulk when coding. See this class for media-type elements (videos, images, etc).

.media {
 border: 1px #888 solid;
 background: #fff;
 padding: 5px;
}

WordPress applies the classes .alignleft, .aligncenter, .alignright and .alignnone to media that the author wants to align to the left, center, right or not align at all (respectively) pages and posts. Instead of copying and pasting the .media rules into each .align type class, I could include .media in as rule and be done with it.

.alignleft {
 .media;
 float: left;
 margin-right: 10px;
 }

.alignright {
 .media;
 float: aright;
 margin-left: 10px;
 }

Etc. (And heck, .media can still be used a class in your HTML code.)

Oh right. And situations were a mixin won’t work as a class is if you’re using parameters (in this case, @spacing) into it. So…

.alignright (@spacing) {
 .media;
 float: right;
 margin-left: @spacing;
 }

Won’t work.

Example 4: Translucency without Photoshop

In CSS3, you can adjust the opacity of colors with rgba(). This here is black at 50% opacity:

background: rgba(0,0,0,.5);

(With the three 0’s being the RGB values of the color and .5 being the opacity converted to decimals.)

And if you’re like me, you might get tired of having to type 0,0,0 in over and over again. Or maybe you don’t like having to look up the RGB values when you have its corresponding hex value right in front of you. fade() to the rescue!

background: fade(#000, 50%);

Making drop shadows the way I want to just got a bazillion times easier.

box-shadow: 0 1px 2px fade(#000, 10%);

Ayups

There are several ways you can use LESS on your sites. I settled for the GUI method (LESS.app for OS X, but after looking over the other shiny shiny GUI apps, I might test the others out a little…), after spending 20 minutes futzing with the JavaScript method and couldn’t figure it out. So GUI for me!