less的基本用法

当我们用多了CSS的时候，会发现CSS简单易懂，但是毫无逻辑，我们来看看下面几种情况：

• 常一个颜色的值能出现很多很多次，或者一个宽度的值能出现很多次；
• 大量的选择器在代码中，一会用那个，一会用这个，毫无逻辑，无层次，不美观，不易维护；
• 每一个新属性的诞生又会带来大量浏览器兼容性的问题；
• 此外，CSS虽然易学，好用，但其短板不可忽视，于是就引入了预处理语言——less

less

less是一门CSS预处理语言，它扩充了CSS，增加了我们前面提到的能够使得代码更有逻辑性的东西，例如变量，混入，函数等，后缀名为.less，同时，less可以运行在Node或者浏览器端

使用 less

引包：在页面中直接引入less.js，可去官网下载放到自己的依赖包文件中，或者利用CDN在线引入

 <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

引入自己写好的less文件：link 标签一定要在 Less.js 之前引入，并且 link 标签的rel 属性要设置为stylesheet/less

  <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

写CSS文件看看

/* style.css */
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

我们用less语法去书写和上面CSS同样功能的代码来看看

/* style.less */
@mainColor:#e92323;
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}
//变量用于字符拼接使用方法
.@{className}{
  color: @mainColor;
}

总结：很显然，我们看出将经常出现的#e92323的值存储在一个变量中，这样清晰直观，假如需要修改某个网站的主题色，那么直接修改这个变量即可，我们.box这个类选择器也储存在一个变量中，同样的道理，易于维护