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 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.
gem install compass-less-plugin
To create a Compass project using Less Framework, enter:
compass create -r compass-less-plugin my_project --using compass-less-plugin
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 browserstablet
- 8 columns at 768px; for iPads and other tabletsmobile
- 3 columns at 320px; for iPhones, iPod Touches, and most other modern mobile deviceswide-mobile
- 5 columns at 480px; for large mobile devices, as well as iPhones and iPod Touches in landscape orientationhigh-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.
The global reset included with the Less Framework can be used by importing the
less/reset
file.
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);
}
Less Framework 4 contains three typographic presets:
typography/16px
- Optimized for 1.5 line-height; good for fonts like Georgiatypography/17px
- Optimized for 1.4 line-height; good for fonts like Palatinotypography/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
The following variables are available to configure the plugin:
$less-grid-element
- The element to mix the grid definition into; defaults tobody
$less-grid-padding
- Globally determines if the grid mixin should also include the default padding; defaults totrue
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");
grid($columns)
- Sets up a grid with given number of columnsgrid-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 Frameworkcolumn($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
tofalse
selection-color($color)
- Sets the background color used for text selection
Thanks to Joni Korpi for providing the Less Framework to the community, and to Samson Ootoovak for helping me test the version 1 beta.