less语法介绍

Less语法介绍

---

一. 环境的安装。

1.先安装node.js。

在node.js官网下载安装node.js。安装完成后按win+R键打开cmd命令行窗口，输入node -v，如果出现版本号证明node.js安装成功。

2.安装less环境。

使用命令npm install less -g全局安装less。安装完成后输入命令lessc -v出现版本号证明less安装成功。

3.手动编译less文件，在less文件目录下使用lessc 要编译的less文件 编译生成的css文件，回车即可。例如：

lessc test.less test.css
编译生成的文件就是test.css文件。

二、less语法说明

1.less中使用@+变量名定义变量。例如：

@color:#f00;
使用的时候就可以直接使用color:@color;即可。

2.less的混入写法。可以定义一段公共的样式，类似定义函数，例如：

.boradus(@r:10px){
    border-radius: @r;
    -webkit-border-radius: @r;
    -moz-border-radius: @r;
    -ms-border-radius: @r;
}
/*
*上边就相当于定义了一段公共样式，在需要的地方直接引入即可
*@r指定义的一个变量，如果不传默认为10px;，传了则使用传递的值。
*/
div {
    width: 100px;
    height: 100px;
    .boradus(5px);
}
编译后得到的css是这样的。
div {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
}

3.less的嵌套写法。可以像写函数一样进行嵌套写法。&表示与，即同级关系。例如：

@color: #f00;
.boradus(@r:10px){
    border-radius: @r;
    -webkit-border-radius: @r;
    -moz-border-radius: @r;
    -ms-border-radius: @r;
}
div {
    width: 100px;
    height: 100px;
    .boradus(5px);
    >a{
        display: block;
        &:hover{
            color: @color;
        }
    }
}
编译完成后的css文件是这样的。
div {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
}
div > a {
  display: block;
}
div > a:hover {
  color: #f00;
}