Download LESS Elements

LESS Elements is a set of useful mixins for the LESS CSS pre-processor to help you cut down the size of your stylesheets.

LESS is a fantastic tool that extends CSS and makes writing and maintaining large stylesheets easy. Even so, I found myself re-writing the same mixins again and again for different projects. LESS Elements is a collection of these common re-usable mixins.

For example, let’s look at a bit of CSS3 code that adds a couple of rounded corners (only the top left and top right edges):

#some_div {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

Browser specific code makes using CSS3 a chore. 6 lines of code just to add rounded corners. LESS mixins to the rescue. With LESS Elements the above can be compressed to just a 1 line:

#some_div {
  .border-radius(5px, 0, 0, 5px);
}

Looks just line shorthand CSS, with the values representing top right, bottom right, bottom left and top left corner radii in a clockwise order. To use LESS Elements, just download it (Github repo), put the “elements.less” file in your stylesheets folder and include it with 1 line of code at the top of your LESS file:

@import "elements.less";

Currently LESS Elements includes the following mixins:

Here are more details on each one:

.gradient

.gradient(#F5F5F5, #EEE, #FFF);

Gradient background. First color is the background color to use for browsers that don’t support gradients. The second two colors are the start and stop colors, going from bottom to top.

.bw-gradient

.bw-gradient(#EEE, 230, 255);

Greyscale gradient background. Three values to set here. First one provides a color to use as a background for older browsers that don’t support gradient backgrounds. Second and third values are the start and end brightness which goes from 0 to 255.

.bordered

.bordered(#EEE, #E5E5E5, #DDD, #E5E5E5);

Quick way to set a 1 pixel thick border that varies its color on each side. The color values go in a clockwise order: top, right, bottom, left.

.drop-shadow

.drop-shadow(0, 1px, 2px, 0.2);

Adds a box-shadow that is a semi-transparent black. The first two values control the x and y axis position, the third controls blur (how big the shadow is), and the final value is the opacity (0 is fully transparent, 1 is opaque).

.rounded

.rounded(5px);

Sets a border-radius for all 4 corners. If you want to set border-radius for individual corners use: .border-radius

.border-radius

.border-radius(5px, 0, 0, 5px);

Sets a border-radius for each of the 4 corners individually. The values go in a clockwise rotation: top right, bottom right, bottom left, top left.

.opacity

.opacity(0.8);

Sets the opacity. 0 is fully transparent, 1 is opaque.

.transition-duration

.transition-duration(0.2s);

Sets a transition-duration (time it takes to do things like hover effects). The value provides a time in seconds.

.rotation

.rotation(15deg);

Rotates the item by a number of degrees clockwise.

.scale

.scale(2);

Scales the item by the ratio provided. The above makes the item 2 times larger.

.transition

.transition(2s, ease-out);

Sets the transition duration and effect to use for any transitions (e.g. hover effects), unlike transition-duration which only sets the duration.

.inner-shadow

.inner-shadow(0, 1, 2, 0.4);

Sets the inner shadow. The first two numbers are the x and y coordinates, the third is the blur and the last one is the strength of the shadow.

.box-shadow

.box-shadow(0 1px 2px #999)

Sets the box-shadow. The first two numbers are the x and y coordinates, then the blur, and the color. This is different from drop-shadow in that it takes on a color instead of setting a transparent black shadow. Additionally, this mixin takes on the whole set of arguments in one go, so no need for commas between each number, and you can also add “inset” before the first number for inset shadow.

.columns

.columns(250px, 0, 50px, #EEE, solid, 1px)

Divides the content into columns. The variables are: column width, column count, column gap, column border color, column border style, column border width.

.translate

.translate(10px, 20px)

Translates an element using the given coordinates. The values are x and y offset coordinates, so the above example moves the element right 10 pixels and up 20 pixels.

* * *

TextMate bundle

Juan G. Hurtado has created a bundle for TextMate users. Get it here.



Special thanks

Special thanks for mixin suggestions I've included to: Kris Van Herzeele, Benoit Adam, Portenart Emile-Victor, Ryan Faerman.