Less Functions

Less Functions

Less: Functions

Less 48,928 has no module system: its built-in functions are global names, grouped in the documentation as logical, string, list, math, type, miscellaneous and four color groups. The property names below label the groups: c color, s string, m math, l list, x logical.

fn.less: functions from each groupCSS

@brand: #1565c0;
.fn {
  c1: lighten(@brand, 20%);
  c2: contrast(@brand);            // black or white, whichever is more legible
  s1: %("%d-%s", 3, "col");
  m1: percentage(0.25);
  l1: extract(12px 16px 20px, 2);
  x1: if(iscolor(@brand), yes, no);
}

Compiled CSS: npx lessc fn.lessCSS

.fn {
  c1: #4f98ec;
  c2: #ffffff;
  s1: "3-col";
  m1: 25%;
  l1: 16px;
  x1: yes;
}

Less color functions such as lighten() work in HSL, so they give different results from Sass 22,539 's color.scale(). Type functions (iscolor(), isunit(4rem, rem)) feed guards, and miscellaneous functions include unit(), data-uri() to inline an image and svg-gradient(). Functions Less does not recognize pass through untouched, which helps with clamp() but hides typos: lighen(@brand, 20%) compiles to lighen(#1565c0, 20%), an invalid value the browser silently discards.

MENU