一、什么是less

less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。

less可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

本文记录了开发中最常用的几种less语法。

二、编译工具

浏览器并不认识less格式文件，我们需要使用编译工具将less文件编译成css文件，可以选择这个工具编译。这个工具使用也十分简单，将less文件的目录拖入，然后设置输出路径。然后每次只要保存less文件就可实现编译。

如果使用其他开发工具也可以，比如使用VSCode的话就可以安装less插件easy less实现保存自动编译。因为我使用的就是VSCode编辑器，所以我使用了这个插件做编译处理。

基本使用

首先新建目录

--images--style  -- main.lessindex.html

编写index.html文件

   
        
     //在这里引入的是编译后的css文件      
    
 

编写mian.less文件:

@charset "utf-8";#main {    width: 100px;    height: 100px;    background-color: red;}

保存编译后，在style目录下就会出现main.css文件，这是编译后的文件，我们可以直接使用。

三、less语法

1、注释

less中有两种注释：/**/和//。

使用/**/的注释是会被编译进css文件的，而使用//的注释不会被编译进css文件。

//main.less@charset "utf-8";/*我会被编译进css文件*///我不会被编译进css文件//执行编译后的main.css@charset "utf-8";/*我会被编译进css文件*/

由于我们应该一般编写和维护less文件，所以我们一般采用第二种注释，无需将注释编译进css文件。

2、变量

less中使用@声明一个变量，和一般程序语言不同的是，@符号与变量之间不能有空格，比如我们要声明一个myWidth这个变量：@myWidth。变量的赋值类似键值对：@myWidth : 200px;

变量的使用：

//less文件@charset "utf-8";@myWidth : 200px;@myHeight : 500px;#main {    width: @myWidth;    height: @myHeight;    background-color: yellowgreen;}

3、混合

混合的意思是说可以将less写法与常规的css写法进行混合书写。

css中为某个元素添加样式，首先需要为其添加类名，使用混合则很方便

//less文件@charset "utf-8";@myWidth : 200px;@myHeight : 200px;#main {    width: @myWidth;    height: @myHeight;    background-color: yellowgreen;    .border}.border {      border:3px solid pink}

在css中我们需要将.border这个类添加到元素的class属性中才能生效。但是在less中，只要将.border加入#main中就可以实现效果。

//编译后的css@charset "utf-8";#main {  width: 200px;  height: 500px;  background-color: yellowgreen;  border: 3px solid green;}.border {  border: 3px solid green;}

混合也可以带参数

//less.border(@mywidth){    border: @mywidth solid green;}.mybox {    .border(5px);}//css.mybox {  border: 5px solid green;}

参数也可以设置一个默认值：

//less.border(@mywidth:4px){    border: @mywidth solid green;}.mybox {    .border();}//css.mybox {  border: 4px solid green;}

4、匹配模式

根据不同的参数可以匹配不同的样式：

.pos(r) {    position:relative;}.pos(a) {    position:absolute;}.pos(f) {    position:fixed;}.pipei {    width:200px;    height:200px;    background-color:green;    .pos(f);     //.pos(r)   .pos(a) 传入不同的参数，实现不同的定位方式}

5、运算

less中可以实现运算，任何数字、颜色或者变量都可以参与运算（+ - * /），运算应该被包裹在括号中。

//less.border(@mywidth:4px){    border: @mywidth + 5px solid green;    //这里的单位可以省略，但是两者必须有一个带单位}.mybox {    .border();}//css.mybox {  border: 4px solid green;}

6、嵌套

嵌套是less中非常有用、高效的语法。

//html
    
    
     
less学习2017-11-26
    
     
less学习2017-11-26
    
     
less学习2017-11-26
    

在css中如果我们需要对这一html结构的样式进行渲染，就会使用#list、#list li、#list li a、#list li span等选择器。在less中我们有了更简洁的写法：

//less#list {    width: 600px;    margin: 30px auto;    list-style: none;    padding: 0;    li {        height: 30px;        line-height: 30px;        background-color: pink;        margin-bottom: 5px;        a {            float: left;        }        span {            float: right;        }    }}//css#list {  width: 600px;  margin: 30px auto;  list-style: none;  padding: 0;}#list li {  height: 30px;  line-height: 30px;  background-color: pink;  margin-bottom: 5px;}#list li a {  float: left;}#list li span {  float: right;}

在less中使用伪类选择器也十分方便：

//less#list li a {  float: left;  &:hover {    font-size:20px;  }}//css#list li a:hover {  font-size: 18px;}

7、arguments参数

有时候我们不想单个操作参数，可以使用@argemunts操作参数。

//less.border_arg(@w:30px,@c:red,@xx:solid){    border:@arguments;}.test_arguments{    .border_arg();}//css.test_arguments {  border: 30px red solid;}

8、避免编译

有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，要输出这样的值我们需要使用~""将语法包裹起来，语法放在双引号或者单引号中间。从而实现不让less编译该段代码：

//lesswidth:~'calc(100%-35)'//csswidth: calc(100%-35);