less

Less 是一门一种动态样式 语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

客户端使用

下载地址

外联样式

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

内联样式如下：

<style type="text/less">
  // less 代码
</style>

接下来 下载 less.js 并通过 标签将其引入，放置于页面的 元素内：

<script src="less.js" type="text/javascript"></script>

注意：你的less样式文件一定要在引入less.js前先引入。

变量

Less中的变量允许你在样式中的某个地方对常用值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果

@base:red;
body{color:@base}

混合

在LESS中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性

.bordered {
  border-top: solid 1px red;
  border-bottom: solid 2px green;
}

.div1 {
  color: #111;
  .bordered;
}

.div2 {
  color: red;
  .bordered;
}

带参数混合

在LESS中，你还可以像函数一样定义一个带参数的属性集合

.border-radius (@radius: 5px) {
     border:1px solid red;
     border-radius: @radius;
     width:300px;
}
.div1 {
    .border-radius(0px);
}
.div3 {
    .border-radius;
}
.div2 {
    .border-radius(20px);
}

arguments

@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量

.pad(@top,@right,@bottom,@left) {
  padding:@arguments;
}
div{
  width:400px;
  border:1px solid red;
  .pad(10px,50px,100px,40px)
}
p
{
  background-color: green;
}

模式匹配

有些情况下，我们想根据传入的参数来改变混合的默认呈现

.mixin (red, @color) {
    color: red;
}
.mixin (green, @color) {
    color: green;
}
.mixin (@_, @color) {
    display: block;
}
@switch: red;
.div1 {
    .mixin(@switch, #888);
}

导引表达式

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用

.mixin (@a) when (@a =red) {
  background-color: red;
}
.mixin (@a) when (@a =green) {
  background-color: green;
}
.mixin (@a) {
  color: @a;
}
.red { .mixin(red) }
.green { .mixin(green) }

嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式

#dvi1 {
  color: red;

  p {
    font-size: 12px;
  }

  .logo {
    width: 300px;
    &:hover {
      text-decoration: none
    }
  }
}

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus,&表示上一级元素