Less Framework Compass Plugin

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

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

Less Framework 4

Less Framework 4 was a significant upgrade to the version that came before it. As a result, this plugin is now **backwards incompatible** with earlier versions.

If you need to use Less Framework 3, use version 0.8 of this plugin.

Installation

gem install compass-less-plugin

Getting Started

To create a Compass project using Less Framework, enter:

compass create -r less my_project --using less

The above command will generate a directory named ‘my_project` populated with the Compass project files. If you look in the project `src` directory, you will find a `less.scss` file and a `partials` directory.

‘less.scss` is the plugin bootstrap file, and imports all necessary support files to use the framework. This file can also be used to configure some of the plugin settings (see the `Framework Configuration Variables` section for more details).

The ‘partials` directory contains files pre-populated with media queries for the grid layouts defined by the Less Framework:

• ‘default` - 10 columns at 992px; for desktops, laptops, tablets in landscape

  orientation, and all old browsers
  

• ‘tablet` - 8 columns at 768px; for iPads and other tablets

• ‘mobile` - 3 columns at 320px; for iPhones, iPod Touches, and most other

  modern mobile devices
  

• ‘wide-mobile` - 5 columns at 480px; for large mobile devices, as well as

  iPhones and iPod Touches in landscape orientation
  

• ‘high-px-ratio` - Overrides styles for devices with a device-pixel-ratio of

  2+, such as the iPhone 4
  

A ‘partials/global` file is also provided to define global styles shared by all layouts.

Global Reset

The global reset included with the Less Framework can be used by importing the ‘less/reset` file.

The Grid

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

#content {
  @include column(5);
}

This will give an element a width of 436px with a 24px 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 4 contains three typographic presets:

• ‘typography/16px` - Optimized for 1.5 line-height; good for fonts like

  Georgia
  

• ‘typography/17px` - Optimized for 1.4 line-height; good for fonts like

  Palatino
  

• ‘typography/18px` - Optimized for 1.33 line-height; good for fonts like Times

If one of the above presets are imported, the following CSS classes also become available to help customize your text:

• ‘gigantic`

• ‘huge`

• ‘large`

• ‘bigger`

• ‘big`

• ‘small`

Framework Configuration Variables

The following variables are available to configure the plugin:

• ‘$less-grid-element` - The element to mix the grid definition into; defaults

  to `body`
  

• ‘$less-grid-padding` - Globally determines if the grid mixin should also

  include the default padding; defaults to `true`
  

Be sure to configure these variables before any ‘@import` calls are made, otherwise the results may be inconsistent. Also, wrap any string variable values with the `unquote` function, e.g.

$less-grid-element: unquote("#container");

Mixins

• ‘grid($columns)` - Sets up a grid with given number of columns

• ‘grid-padding($columns)` - Imports the default padding for a grid with the

  given number of columns; can be used to specify which layouts will use the
  default grid padding as defined by the Less Framework
  

• ‘column($columns, $last)` - Sets the width of an element to span the number

  of given columns with a margin to the right; to disable the margin, set
  `$last` to `false`
  

• ‘selection-color($color)` - Sets the background color used for text selection

Special Thanks

Thanks to Joni Korpi for providing the Less Framework to the community, and to Samson Ootoovak for helping me test the version 1 beta.