LESS Cheat Sheet

// Single line comment

/* Multi-line
   comment */

@import "variables";
@import "mixins.less";

.nav {
  background: blue;
  
  a {
    color: white;
    
    &:hover {
      color: yellow;
    }
  }
}

.button {
  &:hover { }
  &.active { }
  &-large { }  // BEM modifier
}

@primary-color: #3498db;
@font-stack: Helvetica, sans-serif;
@base-spacing: 1rem;

.header {
  color: @primary-color;
  font-family: @font-stack;
  padding: @base-spacing;
}

@name: "primary";

.alert-@{name} {
  color: red;
}

@property: color;

.widget {
  @{property}: blue;
  background-@{property}: red;
}

@var: 0;
.class {
  @var: 1;
  .nested {
    @var: 2;
    prop: @var;  // 2
  }
  prop: @var;  // 1
}

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.button {
  .border-radius(10px);
}

.box-shadow(@x: 0, @y: 2px, @blur: 4px, @color: rgba(0,0,0,0.3)) {
  box-shadow: @x @y @blur @color;
}

.mixin (@a) when (@a > 10) {
  background-color: black;
}

.mixin (@a) when (@a <= 10) {
  background-color: white;
}

.mixin(dark; @color) {
  color: darken(@color, 10%);
}

.mixin(light; @color) {
  color: lighten(@color, 10%);
}

darken(@color, 10%);
lighten(@color, 10%);
saturate(@color, 20%);
desaturate(@color, 20%);
fadein(@color, 10%);
fadeout(@color, 10%);

ceil(2.1);      // 3
floor(2.9);     // 2
percentage(0.5); // 50%
round(1.67);    // 2
sqrt(25);       // 5

e("\9");         // Escape
%("Rep %a", 1+2); // "Rep 3"
replace("Hi Tom", "Tom", "Bob");

isnumber(1234);     // true
isstring("str");    // true
iscolor(#fff);      // true
ispixel(10px);      // true

@base: 5%;
@filler: @base * 2;    // 10%
@other: @base + @filler;  // 15%
width: 100% / 2;      // 50%

@color: #888 / 4;     // #222
@light: #888 + #111;  // #999
@dark: #888 - #111;   // #777

#bundle {
  .button {
    display: block;
    border: 1px solid black;
  }
}

.header a {
  #bundle.button();  // Use mixin
}

@var: red;

#page {
  @var: white;
  color: @var;  // white
  
  #header {
    color: @var;  // white
  }
}

.a {
  color: red;
}

.b {
  &:extend(.a);
  background: blue;
}

.a.b {
  color: red;
}

.test {
  &:extend(.a all);
}

.mixin (@a) when (@a >= 10) {
  background-color: black;
}

.mixin (@a) when (@a > 10) and (@a < 20) {
  background-color: red;
}

.mixin (@a) when (@a = 1), (@a = 2) {
  background-color: blue;
}

.mixin (@a) when not (@a = 0) {
  background-color: green;
}