Color And Voice: September 2011

As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning LESS a breeze, and if in doubt, lets you fall back to CSS.

Variables

These are pretty self-explanatory:
@nice-blue: #5B83AD; @light-blue: @nice-blue + #111;  #header { color: @light-blue; }
Outputs:
#header { color: #6c94be; }
It is also possible to define variables with a variable name:
@fnord: "I am fnord."; @var: 'fnord'; content: @@var;
Which compiles to:
content: "I am fnord.";
Note that variables in LESS are actually ‘constants’ in that they can only be defined once.

Mixins

In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
And we want to use these properties inside other rulesets. Well, we just have to drop in the name of the class in any ruleset we want to include its properties, like so:
#menu a { color: #111; .bordered; } .post a { color: red; .bordered; }
The properties of the .bordered class will now appear in both #menu a and .post a:
#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; }
Any CSS class, id or element ruleset can be mixed-in that way.

Parametric Mixins

LESS has a special type of ruleset which can be mixed in like classes, but accepts parameters. Here’s the canonical example:
.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; }
And here’s how we can mix it into various rulesets:
#header { .border-radius(4px); } .button { .border-radius(6px);   }
Parametric mixins can also have default values for their parameters:
.border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; }
We can invoke it like this now:
#header { .border-radius;   }
And it will include a 5px border-radius.

You can also use parametric mixins which don’t take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets:
.wrap () { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; }  pre { .wrap }
Which would output:
pre { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; }
The @arguments variable

@arguments has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful if you don’t want to deal with individual parameters:
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } .box-shadow(2px, 5px);
Which results in:
box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000;
Nested rules

LESS gives you the ability to use nesting instead of, or in combination with cascading. Lets say we have the following CSS:
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo {  width: 300px;  } #header .logo:hover { text-decoration: none; }
In LESS, we can also write it this way:
#header { color: black;  .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } }
Or this way:
#header        { color: black; .navigation  { font-size: 12px } .logo        { width: 300px; &:hover    { text-decoration: none } } }
The resulting code is more concise, and mimics the structure of your DOM tree.

Notice the & combinator—it’s used when you want a nested selector to be concatinated to its parent selector, instead of acting as a descendent. This is especially important for pseudo-classes like :hover and :focus.

For example:
.bordered { &.float { float: left;  } .top { margin: 5px;  } }
Will output
.bordered.float { float: left;   } .bordered .top { margin: 5px; }
Operations

Any number, color or variable can be operated on. Here are a couple of examples:
@base: 5%; @filler: @base * 2; @other: @base + @filler;  color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler;
The output is pretty much what you expect—LESS understands the difference between colors and units. If a unit is used in an operation, like in:
@var: 1px + 5;
LESS will use that unit for the final output—6px in this case.

Brackets are also authorized in operations:
width: (@var + 5) * 2;
And are required in compound values:
border: (@width * 2) solid black;
Color functions

LESS provides a variety of functions which transform colors. Colors are first converted to the HSL color-space, and then manipulated at the channel level:
lighten(@color, 10%);     // return a color which is 10% *lighter* than @color darken(@color, 10%);      // return a color which is 10% *darker* than @color  saturate(@color, 10%);    // return a color 10% *more* saturated than @color desaturate(@color, 10%);  // return a color 10% *less* saturated than @color  fadein(@color, 10%);      // return a color 10% *less* transparent than @color fadeout(@color, 10%);     // return a color 10% *more* transparent than @color  spin(@color, 10);         // return a color with a 10 degree larger in hue than @color spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
Using them is pretty straightforward:
@base: #f04615;  .class { color: saturate(@base, 5%); background-color: lighten(spin(@base, 8), 25%); }
You can also extract color information:
hue(@color);        // returns the `hue` channel of @color saturation(@color); // returns the `saturation` channel of @color lightness(@color);  // returns the 'lightness' channel of @color
This is useful if you want to create a new color based on another color’s channel, for example:
@new: hsl(hue(@old), 45%, 90%);
@new will have @old’s hue, and its own saturation and lightness.

Namespaces

Sometimes, you may want to group your variables or mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in LESS—say you want to bundle some mixins and variables under #bundle, for later re-use, or for distributing:
#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } }
Now if we want to mixin the .button class in our #header a, we can do:
#header a { color: orange; #bundle > .button; }
Scope

Scope in LESS is very similar to that of programming languages. Variables and mixins are first looked up locally, and if they aren’t found, the compiler will look in the parent scope, and so on.
@var: red;  #page { @var: white; #header { color: @var; // white } }  #footer { color: @var; // red   }
Comments

CSS-style comments are preserved by LESS:
/* Hello, I'm a CSS-style comment */ .class { color: black }
Single-line comments are also valid in LESS, but they are ‘silent’, they don’t show up in the compiled CSS output:
// Hi, I'm a silent comment, I won't show up in your CSS .class { color: white }
Importing

You can import .less files, and all the variables and mixins in them will be made available to the main file. The .less extension is optional, so both of these are valid:
@import "lib.less"; @import "lib";
If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:
@import "lib.css";
The directive will just be left as is, and end up in the CSS output.

String interpolation

Variables can be embeded inside strings in a similar way to ruby or PHP, with the @{name} construct:
@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");
Escaping

Sometimes you might need to output a CSS value which is either not valid CSS syntax, or uses propriatery syntax which LESS doesn’t recognize.

To output such value, we place it inside a string prefixed with ~, for example:
.class { filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; }
This is called an “escaped value”, which will result in:
.class { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png'); }
JavaScript evaluation

JavaScript expressions can be evaluated as values inside .less files. This is done by wrapping the expression with back-ticks:
@var: `"hello".toUpperCase() + '!'`;
Becomes:
@var: "HELLO!";
Note that you may also use interpolation and escaping as with strings:
@str: "hello"; @var: ~`"@{str}".toUpperCase() + '!'`;
Becomes:
@var: HELLO!;
It is also possible to access the JavaScript environment:
@height: `document.body.clientHeight`;

via lesscss.org

Posted via email from Color and Voice

On Wednesday we went for a run at the AIU complex and chatted with a couple of runners what we saw warming up. Turns out that they are in training and one of the runners, Gladis is an olympic hopeful. They invited us to run with them the next morning at 6AM.

A few of us from our group were already up due to jet lag so we met together and ran up to the "Gray Gate" at 6 to meet Gladis and Milton. We said our hellos and then set out.

The run was relatively short, but at 5500 feet, I was struggling slightly. We talked about what everyone was working on, and how great it is to run with friends. I thought back to "Born to Run" as we ran with smiles on our faces.

We ran next to each other, not in a line, taking up the whole dirt road. That was different for me, it was so much more social. And if you fell behind, Gladis would put out her hand and encourage you to catch up. It was subtle, but so different than what I'm used too. It made it fun to be together.

Aftwards we streched in a field and we all learned new ways to hurt ourselves. Our guests teased us for not being able to do things and taunted us to try harder.

It was pretty magical to be honest. The feel of the run wasn't competitive, it wasn't how am I performing compared with the others. It was all of us together.

This morning, other's are going to join us and I look forward to the fellowship.

Posted via email from Color and Voice

Wednesday, September 28, 2011

Saturday, September 24, 2011

Thursday, September 22, 2011

Download ‘320 and Up’

Download HTML5 Boilerplate

Replace these files and folders

‘320 and Up’ also includes:

Variables

Mixins

Parametric Mixins

The @arguments variable

Nested rules

Operations

Color functions

Namespaces

Scope

Comments

Importing

String interpolation

Escaping

JavaScript evaluation

Wednesday, September 21, 2011

Monday, September 19, 2011

Saturday, September 17, 2011

Thursday, September 15, 2011

Monday, September 5, 2011

Sunday, September 4, 2011

Saturday, September 3, 2011

Friday, September 2, 2011

Thursday, September 1, 2011

Followers

Blog Archive

About Me

The `@arguments` variable