Less学习笔记

 

Less

是一种动态样式语言，属于CSS预处理语言的一种。

快速预览

//变量
@color: #9b69ff;
h1{
  color: @color;
}
h2{
  color: @color;
}

//混合
.round(@radius:5px)
{
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
.h1{
  .round;
  width: 100px;
  height:100px;
  border: 1px solid black;
}
.h2{
  .round(10px);
  width: 100px;
  height:100px;
  border: 1px solid black;
}

//嵌套
p{
  font-size: 30px;
  a{
    font-size: 40px;
    &:hover{
      border-width: 1px;
    }
  }
}

//函数
@the-border:1px;
@base-color:#111;
#footer{
  background-color: (@base-color + #003300);
  border-right:(@the-border * 2);
}

使用

第一种：编译工具

这里使用oschina的编译工具。可以将less编译成css。点我

第二种：Node

安装全局的less：

npm install -g less

编译

lessc 名称.less 名称.css

第三种：浏览器使用

安装lesscss.js。

页面引用下载的js。并且引用less文件，引用格式为

<link rel="stylesheet/less" href="example.less" />