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%) } }

04-30 07:24