js 对html文件预处理,使用CSS预处理器Less

前天写了一篇文章，关于如何使用Harp来加快人的开发效率，在Mac系统和Linux系统上测试是没有问题的，但没有在Windows上测试，使用Windows的刚入门的前端工程师，安装Harp失败后，不知道怎么解决问题。不管学习什么，解决问题的能力是最重要的，学会自己动手。

简介

css有以下特点：语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；选择父级元素，对子元素选择的时候还要再写一次。

没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。页面中的主色调就几个而已，如果使用CSS，假如主色调改变了，那么要改变css的很多样式，维护起来非常麻烦。

然而css的预处理器刚好给我们提供了一些便利。这里我们主要说明Less。它提供了以下功能。这些用法这里不会完全涉及，可以参考官方文档。基本语法

嵌套语法

变量

@import

混入

继承

函数

逻辑控制

使用Less

这里主要说的是在客户端使用less

1、新建html页面html>

Hello Less

你好啊

我正在使用Less

注意里面要先引入自己写的less文件。

再引入less的js文件，可以使用CDN，也可以下载到本地引入

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不好用

附录