less入门

less入门

• 安装
  
  首先安装node,执行命令 node install -g less安装完成后可以在任意窗口中使用lessc命令，将.less文件编译成css文件。

• 变量
  
  可以像其他语言一样声明变量
  
  @bgc:#ccc p{ background-color:@bgc; }
  
  执行命令 lessc style.less style.css

• 混入
  
  允许将已有的class和id的样式应用到另一个不同的选择器上

1. #circle{ background-color: #4caf50; border-radius:100% } #small-circle{ width: 50px; height: 50px; #circle }

#circle(@size:25px){ background-color: #4caf50; border-radius:100% width:@size; height:@size; } #small-circle{ #circle(50px) }

• 嵌套
  
  可以用于已与页面的html结构相匹配的方式构造样式表，减少冲突的机会

```

ul{

background-color:@bgc;

padding:10px;

li{

background-color:@bgc;

border-top:1px solid #ccc;

}

}

```

• 运算
  
  可以对数值和颜色进行基本的数学运算

``` @div-width:100px;

@color:#ddd;

#div{

width:300-@div-width;

color:#ddd-100

}

```

• 函数

@bgc:#e0e0e0 div{ height:30px; width:50px; background:@bgc; &:hover{ background-color:fadeout(@bgc,50%) } }