Less和CSS的区别HTML和CSS不是编程语言而是标记语言。很难像JS那样定义变量，写方法，实现模块化开发。LESS是一种CSS预处理语言。它扩展了CSS语言并添加了变量、Mixins和函数等特性，使CSS更易于维护和扩展。使用LESS基本遵循以下步骤：编写LESS代码，使用NODE、JS或者其他工具将编写好的LESS代码编译成我们平时看到的CSS代码（因为浏览器无法解析LESS的语法，所以编写完成的LESS代码需要编译）。Less被称为预编译的css。写得少的代码浏览器无法直接渲染。我们需要将其编译成可以渲染的css。Less开发环境下的编译在开发环境中，我们一般都是通过导入less插件来随时编译Less代码。//注意less在生产环境中，由于每次加载页面都需要导入LESS插件，将LESS文件重新编译成CSS，比较耗性能，拖慢页面速度打开速度。因此，在生产环境中，我们需要提前将LESS文件编译成普通的CSS，然后导入到相应的文件中。以后用户访问的只是编译后的CSS，所以不用LESS编译。在生产环境中，我们需要提前将LESS编译成CSS方法：1）使用Node编译该方法是目前项目中最常用的方法。它把我们的LESS文件编译成CSS文件，直接在我们的项目中导入CSS文件就够了。（1）安装node（2）将LESS模块安装到全局NODE环境中npminstallless-g（3）使用编译命令//->将styles.less文件编译成styles.css文件（如果没有这个CSS文件，会自己创建)lesscstyles.lessstyles.css//->编译后的CSS文件是压缩过的lesscstyles.lessstyles.min.css-xor--compress如果你想要更牛逼的X压缩可以也可以独立设置，下面我们使用--clean-css。这需要提前安装less-plugin-clean-css模块。//->安装less-plugin-clean-cssnpminstall-gless-plugin-clean-css//->安装成功后，可以使用它来压缩lessc--clean-cssstyles.lessstyles.min。css2）使用编译工具（在线编译比较少）目前常用的编译工具有：Koala（据说是目前最流行的）、在线编译（http://tool.oschina.net/less）、SimpLESS等。Less的基本语法与JS中的变量相同，只是LESS的变量定义使用@而不是VAR。//使用变量存储公共属性值@shadowColor:#000;.inner{box-shadow:0010px0@shadowColor;}//使用变量存储公共URL和选择器@selector:box;@bgImg：“../img”；@属性：颜色；@name:"丰";//->LESScode.@{selector}{width:100px;高度：100px；@{属性}：#000；背景:url("@{bgImg}/test.png");&:after{显示：块；内容：@@var；}}混合(Mixins)所谓混合其实就是复制一个选择器中的样式使用//->LESScode.public{width:100px;高度：100px;}navul{.public;list-style:none;}//->编译成CSSresults.public{width:100px;高度：100像素；}导航ul{宽度：100像素；高度：100px；list-style:none;}我们发现navul实际上是将public中设置的style属性值复制到了自己的style中。如果不想在编译结果中输出public风格的结果，只需要写如下代码：//->LESScode.public(){//->add(选择器之后)可以不编译此样式宽度：100px；高度：100px;}navul{.public;list-style:none;}//->编译成CSS的结果navul{width:100px;高度：100px；list-style:none;}3.extend虽然上面的例子中navul继承了public的样式，但是原理是复制代码，这样编译出来的CSS中还是会有很多CSS冗余CSS代码中，为了避免这种情况，我们可以使用extend伪类来实现样式的继承。```//->LESScode.public{width:100px;height:100px;}navul{&:extend(.public);list-style:none;}//->编译成CSS.public的结果，navul{width:100px;height:100px;}navul{list-style:none;}```or```//->LESScode.public{width:100px;height:100px;}navul:extend(.public){list-style:none;}//->编译成CSS的结果和第一种方式一样```4.命名空间和作用域创建命名空间在LESSPrivatescope中，这个privatescope中使用的变量首先检查自己的scope中是否有，如果没有，向上查找一层（类似于JS的scopechain）```//->LESScode@颜色：#ccc；.box{@color：#eee；.gray{颜色：@color;}}.box2{.gray{颜色：@color;}}//->编译成CSS的结果。box.gray{color:#eee;}.box2.gray{color:#ccc;}```5.!important在要调用的mixedset后面加上!important关键字，这样mixedset中的所有属性都可以被继承!important.//->LESScode@color:#ccc;.box{@color:#eee;.gray{颜色：@color;}}navul{.box!important;}//->编译为.box.gray的CSS结果{color:#eee;}navul.gray{color:#eee!important;}6.函数类似于JS,LESS也可以像函数一样设置形参，这个技巧在我们的项目中项目中经常用到，例如：处理CSS3兼容性问题//->LESScode.transition(@property:all;@duration:1s;@function:linear;@delay:0s;){-webkit-transition:@属性@duration@function@delay；-moz-transition:@property@duration@function@delay;-ms-transition:@property@duration@function@delay;-o-过渡：@property@duration@function@delay；过渡：@property@duration@function@delay；}.box1{.transition;}.box2{.transition(@duration:2s);}.box3{.transition(@duration:2s;@property:width;);}//->编译成CSS.box1的结果{-webkit-transition:all1slinear0s;-moz-transition：所有1s线性0s；-ms-transition：全1s线性0s；-o-transition:所有1s线性0s;过渡：全1s线性0s；}.box2{-webkit-transition:all2slinear0s;-moz-transition：所有2s线性0s；-ms-transition：所有2s线性0s；特拉nsition：所有2s线性0s；过渡：所有2s线性0s；}.box3{-webkit-transition:宽度2s线性0s;-moz-transition:宽度2s线性0s；-ms-transition:宽度2s线性0s；-transition:width2slinear0s;过渡：宽度2s线性0s；另外需要注意的是LESS//->LESS中也有参数code.transition(@property:all;@duration:1s;@function:linear;@delay:0s;){-webkit-transition：@参数；过渡：@arguments；}.box1{.transition;}//->编译成CSS.box1{-webkit-transition:all1slinear0s;过渡：全1s线性0s；}
