Skip to content

Instantly share code, notes, and snippets.

@cloudhead
Created January 7, 2012 14:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save cloudhead/1574915 to your computer and use it in GitHub Desktop.
Save cloudhead/1574915 to your computer and use it in GitHub Desktop.
LESS 1.2.0

LESS 1.2.0

Now available on http://lesscss.org and NPM.

This release opens up the powerful branching capabilities of mixin guards and pattern-matching as an alternative to conditional statements.

In trying to stay as close as possible to the declarative nature of CSS, LESS has opted to implement conditional execution via guarded mixins, in the vein of @media query feature specifications:

/* a css media query */
@media screen and (device-height: 600px) {
/* a less mixin definition */
.mixin (@height) when (@screen) and (@height = 600px) {

See 'Language -> Pattern Matching' section on http://lesscss.org

Here's the canonical example:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Other changes include:

  • Type-checking functions (iscolor, ispixel, ...), color mix function (from Sass).

  • Improvements to error reporting.

  • Better @media and @import support when using media features.

  • Support for !important on mixin calls.

  • Lots of bug fixes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment