1 安装
npm install -g less
2 使用
//命令行编译
$ lessc styles.less styles.css
//压缩
//需要安装插件 clean-css plugin
$ lessc --clean-css styles.less styles.min.css
如果迫不及待想直接开始用
//引用你的less
<link rel="stylesheet/less" type="text/css" href="styles.less" />
//下载less.js进行编译
<script>
//配置选项
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js" type="text/javascript"></script>
语言
1 变量
以 @ 开头 定义变量
属性变量
/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
#wrap {
color: @color;
}
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
选择器变量名 必须使用大括号包裹
/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
url 变量 - 必须使用大括号包裹
@images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}
声明变量
- 结构: @name: { 属性: 值 ;};
- 使用:@name();
@background: {background:red;};
#main{
@background();
}
变量运算
- 加减法时 以第一个数据的单位为基准
- 乘除法时 注意单位一定要统一
@width:300px;
@color:#222;
#wrap{
width:@width-20;
height:@width-20*5;
margin:(@width-20)*5;
color:@color*2;
background-color:@color + #111;
}
变量作用域
就近原则
/* Less */
@var: @a;
@a: 100%;
#wrap {
width: @var;
@a: 9%;
}
/* 生成的 CSS */
#wrap {
width: 9%;
}
双@@
/* Less */
@fnord: "I am fnord.";
@var: "fnord";
#wrap::after{
content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
content: "I am fnord.";
}
嵌套
& 父级选择器的名字
/* Less */
#header{
&:after{
content:"Less is more!";
}
.title{
font-weight:bold;
}
&_content{//理解方式:直接把 & 替换成 #header
margin:20px;
}
}
/* 生成的 CSS */
#header::after{
content:"Less is more!";
}
#header .title{ //嵌套了
font-weight:bold;
}
#header_content{//没有嵌套!
margin:20px;
}
媒体查询
/* Less */
#main{
@media screen{
@media (max-width:768px){
width:100px;
}
}
@media tv {
width:2000px;
}
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
#main{
width:100px;
}
}
@media tv{
#main{
width:2000px;
}
}
混合方法
/* Less */
.card() { // 等价于 .card
background: #f6f6f6;
-webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#wrap{
.card();//等价于.card;
}
默认参数方法
适用于样式继承
/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
border:solid 1px @color;
box-shadow: @arguments;//指代的是 全部参数
}
#main{
.border(0px,5px,30px,red);//必须带着单位
}
#wrap{
.border(0px);
}
#content{
.border();
}
/* 生成的 CSS */
#main{
border:solid 1px red;
box-shadow:0px,5px,30px,red;
}
#wrap{
border:solid 1px #000;
box-shadow: 0px 50px 30px #000;
}
#content{
border:solid 1px #000;
box-shadow: 10px 50px 30px #000;
}
多态
- 第一个参数
left
要会找到方法中匹配程度最高的,如果匹配程度相同,将全部选择,并存在着样式覆盖替换。 - 如果匹配的参数 是变量,则将会匹配,如
@_
。
/* Less */
.triangle(top,@width:20px,@color:#000){
border-color:transparent transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
border-color:transparent @color transparent transparent ;
}
.triangle(bottom,@width:20px,@color:#000){
border-color:@color transparent transparent transparent ;
}
.triangle(left,@width:20px,@color:#000){
border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
border-style: solid;
border-width: @width;
}
#main{
.triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
border-color:transparent transparent transparent #999;
border-style: solid;
border-width: 50px;
}