Less的学习和使用（一）

less的学习和使用

Less是什么？如何在项目中添加LessLess具体使用总结 最近由于项目组没有具体的前端规范，自觉协同开发或者修改他人的代码阻碍过大。。便向老大申请了制定一个规范的权限。 除了一些代码规范，我还努力的想推进组内同学一起使用less，来提高大家的代码风格。借此机会，自己也学习了更多less的内容并分享给大家。

Less是什么？

惯例，先问是什么。Less是一种预处理语言。相似的还有Sass，Stylus在这里不做探讨。

为什么选择Less Less和其他的预处理语言相比来说功能是要少一些的，所以相应的更容易学习，上手更快 Less保留了css的内容，在其基础上添加了方法，使用起来更顺滑 本人从接触前端之初就在使用Less，也是使用了很久。

如何在项目中添加Less

可以直接引入less的文件，页面中 引入 Less.js。可以使用cdn的链接或者是官网下载Less.js的文件 <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> <link rel="stylesheet/less" href="style.less"> <script src="less.min.js"></script> 如果是cli搭建的项目，可以在搭建的时候就直接选择使用Less，并且在需要使用的页面设置lang=less。如果没有选择怎么办? 那我们直接使用npm下载依赖就可以 npm install less less-loader --save-dev

这里在–save后面加了-dev是将依赖下载到devDependencies我们的开发依赖中。

如果是使用webpack构建的项目，除了要下载依赖之外，还需要再webpack.config.js中修改配置。 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", },

Less具体使用

以前我使用Less基本就是嵌套的写法，很少情况会定义一些变量，学习了这些以后，感觉Less用的好，css也是可以写出花来的。讲了这么多，下面我们进入正题吧。

定义变量 值变量 /* Less */ @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; } /* 生成的 CSS */ #header { width: 10px; height: 20px; }

属性变量

/* Less */ @borderStyle: border-style; @Soild:solid; #wrap{ @{borderStyle}: @Soild;//变量名 必须使用大括号包裹 } /* 生成的 CSS */ #wrap{ border-style:solid; }

url 变量

/* Less */ @images: "../img";//需要加引号 body { background: url("@{images}/dog.png");//变量名 必须使用大括号包裹 } /* 生成的 CSS */ body { background: url("../img/dog.png"); } 最常用的就是嵌套的写法了，嵌套的写法不仅结构清晰，更不会有层级不够样式被覆盖的问题。

需要注意的是：我们需要避免层级嵌套过深的情况，减少冗余代码。建议不要超过三层。

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

/* Less */ #header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } /* 生成的 CSS */ #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } } 混合（mixins）我们可以使用定义的类：比如我们定义了一个边框的类 .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } /* 使用mixins */ #menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }

今天的学习差不多就结束了。

Less还有很多的用法等着我去探究，上述的已经可以保证平时项目中的大部分需求了，用好这些，可以让我们的代码结构更加清晰，简洁明了。

总结

Less总体来说，

优点：上手快，易学习。对于多层级的类使用less不会出错，结构清晰。

但是建议不要嵌套太多层。

缺点嘛：太好用了还没发现。