MENU


Variables and Operations

In Less, variable names begin with @.
If you wish to substitute selector names, property names, and URLs, you must use interpolation with @{var}.
Variable names can also be substituted.
The sign ~ unquotes a string.
@x:green;
@y:1px solid @x;
@z:y;

@m:div;
@n:background;
@o:'//';

@{m}{
   @{n}: url('@{o}pic.png');
   color: @@z;
}

span:after{
   content: ~"HELLO";
}

div { background: url('//pic.png'); color: 1px solid #008000; } span:after { content: HELLO; }
When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards.
Less also understands some basic numeric operators on its values of various units.
@v: 0px;
.class {
  @v: 100px;
  .brass {
    @v: 200px;
    height: @v;
    @var: 300px;
  }
  width: @v;
}

@x: (40px + 10) * 2 / 2;
@y: #888 / 4;
.test {
   width: @x;
   color: @y;
}

.class { width: 100px; } .class .brass { height: 200px; } .test { width: 50px; color: #222222; }