less入门

Less简单介绍
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 扩充了 CSS 语言,增加了诸如变量、混合(mixin)、运算、函数等功能。

Less 既可以运行在服务器端(Node.js 和 Rhino 平台)也可以运行在客户端(浏览器)。

对于初学者来说，不会用node来安装，可以直接在Visual Studio Code编辑器里下载Easy LESS插件。

装好了插件我们就可以写less代码了（当我们再Visual Studio Code装好插件时，保存时会自动生成一个css文件）
less的使用方法如图

@Color : red; 
@backgroundColo : pink; 
.box{
    color : @Color;
    background-color: @backgroundColo;
}
.box1{
    color : @Color;
    background-color: @backgroundColo;
}
.box2{
    color : @Color;
    background-color: @backgroundColo;
}
.box3{
    color : @Color;
    background-color: @backgroundColo;
}
.box4{
    color : @Color;
    background-color: @backgroundColo;
}

当页面很多地方都用了同样的样式时，这个时候我们就能声明变量的方式来赋值，当我们改变这个样式时只需要改变量的值，不用再一个一个去找到每一个需要改的地方，大大的增加了页面的可维护性。（注意：声明变量时前面一定要加@符号）

.borderRadius (@sizs) {
    border-radius : @sizs;
}
.box5{
    .borderRadius (5px)
}

我们的less还可以像js一样的来封装函数，需要时可以直接调用。

下面我们来谈谈less与sass的异同
Sass和Less的比较

相同之处：

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
不同之处：

1、Less环境较Sass简单

Cass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，

2、Less使用较Sass简单

LESS并没有裁剪CSS原有的特性，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。只要你了解CSS基础就可以很容易上手

3、从功能出发，Sass较Less略强大一些

4、Less与Sass处理机制不一样

5、关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
所以我们看下来会发现，sass比less好一点，哈哈