less的理解与使用

Less : 指动态样式语言，通过间接明了的语法进行定义,是编写css的工作变动非常简单,并且本质上,less包含了一套自定义的语法以及一个解析器,它可以使用函数,变量等其他功能,使Css的编译更加方便
一 . Less的安装
Less可以安装在多种环境中,这里只列举使用nodeJS的方法安装Less

1. 搭建nodeJS环境
   在nodeJS官网中下载并安装环境(nodeJS的官网点此链接)
   在以下页面中安装nodeJS环境
   

2. 检测nodeJS是否安装成功
   在电脑桌面点击键盘的 Window+R键,调出运行窗口,输入cmd进入控制台
   在控制台输入node -v判断nodeJS是否安装成功
   

3. 搭建Less环境
   nodeJS安装成功后,使用npm install -g less在线安装Less

4. 检测Less是否搭建完毕
   

5. 在HBuilder中创建Less环境
   

   在弹出框中选中Less并双击
   

6. 检测是否创建成功
   新建一个工程,创建less文件,如果成功,会在当前文件夹创建一个相同名称的css文件

二. Less的使用

变量是Less中很重要的一个因素,在less中,使用@符号创建变量,举例如下
less中代码

@width:30px;
@height:20px;

div{
    width: @width;
    height: @height;
}

生成的css代码

div {
  width: 30px;
  height: 20px;
}

而在less中可以嵌套使用css的代码,举例如下:
less中代码

@width:30px;
@height:20px;
@back:red;

div{
    width: @width;
    height: @height;
    ul{
        width: 20px;
        li{
            width: 20px;
            >a{
                background: @back;
            }
            &:before{
                width: 20px;
            }
        }
    }
}

css中代码

div {
  width: 30px;
  height: 20px;
}
div ul {
  width: 20px;
}
div ul li {
  width: 20px;
}
div ul li > a {
  background: red;
}
div ul li:before {
  width: 20px;
}

补充 :
css3中新添加的长度单位

​rem和em单位是由浏览器基于你设计中的字体大小计算得到的一个像素值

em是基于使用他们的元素字体的大小

rem是基于html字体大小

em单位可能受到任何继承的父元素的字体大小影响

rem单位可以重浏览器字体大小设置字体大小