前天写了一篇文章，关于如何使用Harp来加快人的开发效率，在Mac系统和Linux系统上测试是没有问题的，但没有在Windows上测试，使用Windows的刚入门的前端工程师，安装Harp失败后，不知道怎么解决问题。不管学习什么，解决问题的能力是最重要的，学会自己动手。
简介
css有以下特点：
语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；选择父级元素，对子元素选择的时候还要再写一次。
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。页面中的主色调就几个而已，如果使用CSS，假如主色调改变了，那么要改变css的很多样式，维护起来非常麻烦。
然而css的预处理器刚好给我们提供了一些便利。这里我们主要说明Less。它提供了以下功能。这些用法这里不会完全涉及，可以参考官方文档。
基本语法
嵌套语法
变量
@import
混入
继承
函数
逻辑控制
使用Less
这里主要说的是在客户端使用less
1、新建html页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello Less</title> <link rel="stylesheet/less" type="text/css" href="css/my.less"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script></head><body><div> <p>你好啊</p> <h1> 我正在使用<span>Less</span> </h1></div></body></html>
注意里面要先引入自己写的less文件。
<link rel="stylesheet/less" type="text/css" href="css/my.less" />
再引入less的js文件，可以使用CDN，也可以下载到本地引入
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
2、less文件的内容
@base: #f938ab;div{ background: red;
h1{ background: yellow;
span{ background: blue;
}
}
p{ background: @base;
}
}可以这些基本的less写法，已经比css简单很多了，这里主要涉及到嵌套选择器，定义颜色变量
3、直接在浏览器打开HTML页面即可
效果图
总结
这篇文章主要介绍了css的劣势，以及简单说了css预处理器的一些特点。最后使用一个案例来说明less的使用。
在生产环境尽量使用css，可以直接使用命令将less编译为css文件，再在html页面里面引入css即可。平时开发可直接使用less。
注意： harp现在在windows不好用
附录
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
