compass-less-plugin

Less Framework Compass Plugin

This plugin adds Less Framework 4 to Compass.

Less Framework was written by Joni Korpi. For more information, visit the official site at 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.