入门less，前端利器，什么是less？Less是一种CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin和函数等特性，使CSS更易于维护和扩展。less是我们快速编写CSS的工具，增强了CSS代码的可扩展性和复用性。Less可以运行在Node或浏览器上。少能为我们做什么？下面看一段我们经常写的代码)无重复中心；背景大小：包含；-webkit-背景大小：包含；-moz-背景大小：包含；-o-background-size:contain;}nava.homei{background:url('images/nav-home-off.png')无重复中心；背景大小：包含；-webkit-背景大小：包含；-moz-背景大小：包含；contain;}nava.topics.activei{background:url('images/nav-circle-on.png')no-repeatcenter;背景大小：包含；-webkit-背景大小：包含；-moz-背景大小：包含；-o-background-size:contain;}nava.topicsi{background:url('images/nav-circle-off.png')no-repeatcenter;背景大小：包含；-webkit-background-size：包含；-moz-背景大小：包含；-o-background-size:contain;}一遍又一遍地写一大段相同的代码，可能会很无聊，如果要改contain就是co版本呢？看看less会做什么。//相当于新建一个函数Mixins(混入).border-radius(@radius:10px){border-radius:@radius;-webkit-边界半径：@radius；-moz-边界半径：@radius；-o-border-radius:@radius;}.background-size(@type){background-size:@type;-webkit-背景大小：@type；-moz-背景大小：@type；-o-background-size:@type;}//用法.orderList{background-color:#E36264;宽度：100px；高度：200px；.border-radius(15px);//使用函数可以省去很多重复的兼容码.border-radius;//使用函数可以省去很多重复的兼容码.background-size(contain);}//这样整个世界都很美nava.主题i{background:url('images/nav-circle-off.png')no-repeatcenter;.background-size(contain);}可见，和JavaScript中的arguments一样，Mixins也有这样一个变量：@arguments@arguments是Mixins中非常特殊的参数。当Mixins提到这个参数时，它意味着所有的变量。在很多情况下，这个参数可以为您节省大量代码。.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){-moz-box-shadow:@arguments;-webkit-box-shadow:@arguments;盒子阴影：@参数；}#header{.boxShadow(2px,2px,3px,#f36);}变量写代码少/**大家都遇到过这样的问题。我们在做蒙皮功能的时候，有一个主色，我们写代码设计者说我要改主色后，你会发现我用了100处主色，然后只能改了100次，太难受了！！有没有？？直接提出一个变量有多好？**///定义一个变量@colorFff:#fff;//用法footer{background-color:@colorFff}nav{color:@colorFff;}header{border-right:1pxsolid@colorFff;}最终生成的代码footer{background-color:#ffffff;}nav{color:#ffffff;}header{border-right:1pxsolid#ffffff;}代码片段写少代码//重复代码，less告诉你能不能这样写我觉得自己可以过上好日子，所以可以这样保存//Defineapublicstyle.icon20{width:20px;高度：20px；display:inline-block;}//使用它.icon-my{.icon20;背景：url('images/nav-my-off.png')无重复中心；.background-size(contain);}.icon-car{.icon20;背景：url('images/nav-car-off.png')无重复中心；.background-size(contain);}生成的css对应的是重复代码，less告诉你可以这样写，你觉得你能过上好日子吗，这样你就省了.icon-my{width:20px;高度：20px；显示：内联块；背景：url('images/nav-my-off.png')无重复中心；}.icon-car{宽度：20px；高度：20px；：内联块；background:url('images/nav-car-off.png')no-repeatcenter;}有时候我们需要引用一个less文件/*LESSDocument*///引入一个publicless文件@import"base.less";嵌套写法//这样的css你应该不陌生code.shopcar-item{font-size:1.5rem;背景色：#ffffff；位置：相对；填充：10px10px10px70px;border-bottom:1pxsolid#ededed;}.shopcar-itemimg{width:100%;}//如果我要选择img，我必须在前面加一个，嗯，这个可以接受，那又怎样？.shopcar-item.item-con.add-btn,.shopcar-item.item-con.mul-btn{显示：内联块；填充：5px10px；背景色：#ff4354；颜色：#ffffff；边框-半径：5px；margin:05px;}来看看怎么写less//看清楚的嵌套关系告别冗长的selectors.shopcar-item{font-size:1.5rem;背景色：#ffffff;位置：相对；填充：10px10px10px70px；底部边框：1pxsolid#ededed;img{宽度：100%；}.item-con{位置：相对；.add-btn,.mul-btn{显示：内联块；填充：5px10px；背景色：#ff4354；颜色：#ffffff；边界半径：5px；边距：05px；}}}以及在我们像this.nav{background-color:#ededed;}.nav.focus{background-color:#cccccc;}.nav:after{content:"";显示：块；宽度：100px；height:100px;}less告诉你，我们可以这样写，一个元素的各种状态一目了然。导航{背景颜色：#ededed;&.focus{背景颜色：#cccccc;}&:after{内容：“”；显示：块；宽度：100px；高度：100px；}}Operationandfunction//Operationandfunction@init:#111111;@transition:@init*2;.switchColor{color:@transition;}上面例子中最终生成的style.switchColor{color:#222222;}，使用LESS的操作是一个特性。其实简单来说就是一个数值（数字、颜色、变量等）进行加减乘除。我们在做响应式布局适配的时候，经常需要计算rem，用less告别手工计算。px2rem(@name,@px){@{name}:@px/75*1rem;}.orderList{.px2rem(字体大小,32);背景色：#E36264；宽度：100px；height:200px;}//最终生成的css.orderList{font-size:0.42666667rem;背景色：#E36264；宽度：100px；height:200px;}less这么好用怎么用？？使用
