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;
}