LESS -- 动态的CSS语言

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数。

变量：
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

继承(#header)和函数(#footer)：
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

嵌套：
p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }

函数 & 运算：
@base-color: #111;
@red:        #842210;

#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

ref:
中文参考