An Introduction to Less

#Less is more...

"Less extends CSS with variables, mixins, operations and nested rules"

Less is a CSS pre-processor available in JavaScript, PHP and Ruby. Rules can used during development that extend the capabilities of CSS, incorporating future standards (http://oocss.org/spec/css-variables.html) and object-orientated features from other languages such as Mixins and Method Chaining.

The following sections provide a quick overview of the features used by Baseplate (incorporated into Chassis) and the associated syntax (used to generate valid CSS).

##Variables Variables allow you to specify widely used 'global' values (or constants, e.g. hex colour values from a colour palette) in a single place, and then re-use them throughout the style sheet. This makes global changes truly a one-line change of code.

Less can be leveraged to support a design grid by allowing Baseline and Column values to be derived instead of manually calculating the correct heights and widths in pixels for each visual design implementation.

For example (taken from baseplate.grid.constants.less and layouts.less respectively):

@baseline: 18px;
@column:   85px;
@gutter:   10px;
@pageWidth: 960px;


.layout-2-column #content-related,
.layout-2-column .col-2 {
  margin-left: @gutter;
  .width(5);
}

##Mixins Mixins allow you to copy all the properties of a class into another class by simply including the class name as one of its properties. It's just like variables, but for whole classes. Mixins can also behave like functions and take arguments, as seen in the example bellow. For example, .top: (as our mixable class)

.top(@n: 0) {
  top: @n * @baseline;
}

.pg-chassis-home #content-subnav a {
  position: relative;
  .top(-3);
}

##Nested Rules In Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

For example, li:

.process-flow {
  .marginTop(1);
  .marginLeftGutter(1);
  .marginRightGutter(1);
  .height(3);
  li { /* nested rule */
     margin-top: 14px;
     float: left;
  }
}

##Operations Operations let you add, subtract, divide and multiply property values and colours, granting the ability to create complex relationships between properties. These 'functions' are what underpin the Baseplate Grid System (used by Chassis).

.top(@n: 0) {
  top: @n * @baseline;
}

.right(@n: 0) {
  right: ((@column + @gutter) * @n) + @gutter;
}

.bottom(@n: 0) {
  bottom: @n * @baseline;
}

.left(@n: 0) {
  left: ((@column + @gutter) * @n) + @gutter;
}

##How to use Less (PHP version) To use the PHP version, simply include a reference to Less PHP:

<?php
  require 'dev/less/lessc.inc.php';
  $less1 = new lessc('dev/less/templates/layouts/layouts-18x10-960.less');
  file_put_contents('css/layouts/layouts-18x10-960.css', $less1->parse());
?>

Every time the page is refreshed Less PHP will read the less layout and component files and compile them into CSS in the relevant directories.

For further information please reference: http://leafo.net/lessphp/How to use Less (JavaScript version)

To use the JavaScript version, simply include a reference to less.js

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

Next just link to the less file you'd like to use and set the rel attribute with a value of

"stylesheet/less". 

<link rel="stylesheet/less" href="css/test.less" type="text/css" />

##Prevent Caching To see realtime updates to your less file as you save include the following. With this enabled Less will constantly poll for changes to the linked less file and regenerate it if it's been changed.

<script type="text/javascript" charset="utf-8">
  less.env = "development";
  less.watch();
</script>

More on installing and using Less http://lesscss.org/docs