LESS Compiler | Programmer Online Tools

Less Compiler

Common functions

each

Bind the evaluation of a ruleset to each member of a list.

Input

@selectors: primary, info, success,warning,danger;
    each(@selectors, {
    .btn-@{value} {
        color: #ffffff;
    }
});

Output

.btn-primary {
  color: #ffffff;
}
.btn-info {
  color: #ffffff;
}
.btn-success {
  color: #ffffff;
}
.btn-warning {
  color: #ffffff;
}
.btn-danger {
  color: #ffffff;
}

percentage

Converts a floating point number into a percentage string.

Input

.container {
    margin-left: percentage(0.5);
}

Output

.container {
    margin-left: 50%;
}

lighten

Increase the lightness of a color in the HSL color space by an absolute amount.

Input

.container {
    background:lighten(#00ff00, 30%)
}

Output

.container {
  background: #99ff99;
}

#00ff00

#99ff99

darken

Decrease the lightness of a color in the HSL color space by an absolute amount.

Input

.container {
    background:darken(#cb7832, 30%)
}

Output

.container {
  background: #502f14;
}

#cb7832

#502f14

For more info you can visit lesscss.org.