Less Framework Compass Plugin

This plugin adds Less Framework 3 to [Compass](compass-style.org/).

Less Framework 3 was written by Joni Korpi. For more information, visit the official site at [lessframework.com/](http://lessframework.com/)

Installation

gem install compass-less-plugin

Getting Started

To create a Compass project using Less Framework 3, enter:

compass create -r lessframework my_project --using less

The above command will generate a ‘styles.scss` file and a `partials` directory containing files pre-populated with media queries for each grid layout:

• ‘partials/_8` - The default; for tablets at 768 px, netbooks, and old browsers

• ‘partials/_3` - For all iPhones, iPod Touches, and other 320 px mobile devices

• ‘partials/_5` - For 480 px mobile devices, narrow browsers, and landscape iPhones

• ‘partials/_11` - 984 px layout for those wanting something close to 960 px

• ‘partials/_13` - For laptops, desktops, and hdtvs at 1280 px and beyond.

• ‘partials/_iphone4` - Overrides for iPhone 4 and other high device-pixel-ratio devices

Populating the Grid

To calculate column widths, use the ‘column(n, [last])` mixin:

#content {
  @include column(5);
}

This will create a 396 px column with a 24 px gutter to the right.

To avoid creating the right gutter (e.g. an element is the last column in a row), set the ‘last` parameter to `true`:

#sidebar {
  @include column(3, true);
}

Typography

Less Framework contains typography settings optimized for line heights of ‘1.5` and `1.3`. While this plugin includes the `1.5` line height optimizations by default, this can easily be switched by importing `lessframework/text/13` instead of `lessframework/text/15` in `styles.scss`.

**Note to users of versions prior to 0.7:** Please update the ‘lessframework/text` import to be one of the aforementioned text modules when upgrading.

Typography Mixins

The following typography mixins are available:

• ‘gigantic`

• ‘huge`

• ‘large`

• ‘big`

• ‘normal`

• ‘small`

In addition, the ‘$less-font-family` variable contains the font stack assigned to the imported typography module.