CSS预处理器定义了一种新的语言，其基本思想是使用一种特殊的编程语言为CSS添加一些编程特性，以CSS为目标生成文件，然后开发者只需使用这种语言来完成编码工作。简单的说，CSS预处理器使用一种特殊的编程语言来设计网页的样式，然后编译成一个普通的CSS文件，供项目使用。CSS预处理器技术现在已经非常成熟，出现了各种CSS预处理器语言，但不可能一一列举。本文主要介绍比较常见的CSS预处理器语言之一Less的初体验。2009年LessAlexisSellier和设计LESS的第一个版本是用Ruby编写的，在后来的版本中被JavaScript取代。Less是一种CSS预处理语言，它对CSS语言进行了扩展，增加了变量、mixins、函数等功能，使CSS更易于维护，也更易于创建主题。关于Less的基本使用，我们需要从嵌套、混合、变量、函数和介绍等方面一一了解。1Less的安装、使用和编译：引用Less，全局安装npminstallless-g新建index.html文件和main.less，在index.html中导入main.css，然后输入如下语句自动编译进入main.csslesscmain.lessmain.css2Less的基本语法嵌套在css中。父子元素通常这样写：.container{padding:0;}.container.header{background-color:red;}通过Less，父子嵌套关系如下，一目了然。也就是下面的代码编译成上面的css语法。.container{填充：0;.header{背景颜色：红色；}}伪类伪类在css中的写法如下：#header:after{content:"";显示：块；字体大小：0；高度：0；明确：两者；visibility:hidden;}在less中引入时，可以用一个符号&来代替主类#header;&代表上一层的类名。#header{&:after{内容："";显示：块；字体大小：0；高度：0；明确：两者；相同的代码；比如把三个div的背景颜色改成蓝色，我们只需要这样：@background:blue;less是js写css的方式使用@符号来定义变量@变量名被认为作为字符字符串变量可以作为样式属性值：background-color:@color;也可以作为类名，我们需要把{}包起来：下面的代码。@classname表示.main。.@{classname}{background-color:@color;}@classname:main;@color:red;函数使用$lesscfunc.less来翻译func.css文件.border-radius(@radius){-webkit-border-radius:@radius;-moz-边界半径：@radius；border-radius:@radius;}#header{.border-radius(4px);}.button{.border-radius(6px);}进入css如下：#header{-webkit-border-radius:4px;-moz-边框半径：4px；border-radius:4px;}.button{-webkit-border-radius:6px;-moz-边框半径：6px；border-radius:6px;}该函数的参数允许设置默认值。border-radius(@radius:10px){-webkit-border-radius:@radius;-moz-边界半径：@radius；border-radius:@radius;}#header{.border-radius();}.button{.border-radius();}编译css后的代码为：#header{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}.button{-webkit-border-radius:10px;-moz-边框半径：10px；border-radius:10px;}当函数有多个参数时，用分号隔开，调用时使用变量名，不是location.mixin(@radius:10px;@color:green;){-webkit-border-半径：@radius；-moz-边界半径：@radius；边界半径：@radius；color:@color;}#header{.mixin(@color:green);}.button{.mixin(@color:green);}编译css是：#header{-webkit-border-radius:10px;-moz-边框半径：10px；边界半径：10px；颜色：绿色；}.button{-webkit-border-radius:10px;-moz-边框半径：10px；边界半径：10px；color:green;}少内置函数（自有函数）1转义2百分比（percentage）.mixin(@radius:10px;@color:green;){-webkit-border-radius:@radius;-moz-边界半径：@radius；边界半径：@radius；颜色：@颜色；width:percentage(.5);}#header{.mixin(@color:green);}.button{.mixin(@color:green);}编译成css为：#header{-webkit-border-radius:10像素；-moz-边框半径：10px；边界半径：10px；颜色：绿色；宽度：50%；}.button{-webkit-border-radius:10px;-moz-边框半径：10px；边界半径：10px；颜色：绿色；宽度：50%；}3convert(unitconversion)混合提取通用类，比如下面的css代码css中的代码可以这样写成less：#headera{color:#111;border-top:solid1px#595959;border-bottom:solid2px#595959;}#headerspan{高度:16px;border-top:solid1px#595959;border-bottom:solid2px#595959;}#headerp{颜色:红色;border-top:solid1px#595959;border-bottom:solid2px#595959;}.border_style{border-top:solid1px#595959;border-bottom:solid2px#595959;}在less中，我们可以定义一个通用的样式名border-style，那么编译后的css就是上面的css代码：.borde_style{border-top:solid1px#595959;border-bottom:solid2px#595959;}#headera{颜色:#111;.borde_style;}#headerspan{高度：16px;.borde_style;}#headerp{颜色：红色；;}3Less的引入比如新建一个.less，@import'./main.less';然后编译，我们会发现编译出来的one.css中包含了main.less中的样式内容。4Less的优点和缺点优点：开发速度提高代码优化效率提高（对开发者而言）代码更容易理解（对开发者而言）代码更干净、美观、易于维护功能更多更强缺点：功能比Sass弱，比如作为对象，循环，判断生态环境略逊于Sass（2006）。需要额外的编译器重新编译CSS代码，这意味着浏览器多了一个进程，网页显示的速度会变慢。
