- HTML和CSS不属于编程语言而是属于标记语言,所以很难像JS一样定义变量、编写方法、实现模块化开发等。
- 目前的CSS编写模式中,都是定义一些公共的样式类名,哪一块的HTML需要这个样式,就去增加对应的样式类名,所以我们经常看到一个标签上存在很多样式类名,在这种模式中我们要时常关注CSS的优先级,避免样式的重叠覆盖…
- 为了解决CSS的这一困境,CSS预处理预编译的思想脱颖而出,比较具有代表性的有LESS、SASS、Stylus。它们在传统的CSS基础上增加了大量的新的语法,编写方式,常用的函数等,可以让我们的CSS像JS一样成为一门编程语言。基于LESS我么可以把一些经常用到的样式定义成变量或者函数,以后需要直接的调取使用即可,这样不仅有利于增加我们的开发速度,也有利于项目的后期维护与可复用性。
LESS
- LESS是一门CSS预处理语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS更易维护和扩展。使用LESS基本上按照这样的步骤:编写LESS代码,使用NODE、JS或者是其他的工具把编写的LESS代码编译成我们平时看到的CSS代码(因为浏览器是无法解析LESS的语法的,所以编写完成的LESS代码需要进行编译)。
案例1:
在传统的CSS编写中,我们事先为一个盒子.box编写了一套样式,当鼠标滑过的时候,让盒子在原有样式的部分颜色值上发生改变,里面的DIV标签的阴影颜色变重,这样的话我们需要把之前的样式拿过来写一遍,只是调整一下透明度或者颜色值而已,页面中的冗余代码比较的多,也不方便后期的维护。
如果我们使用的是LESS,那么我们可以节省很多的工作,也可以实现可扩展性和通用性,看下面的LESS代码:
通过NODE编译后的结果为:
大家感受一下,是不是感觉LESS很强大,一方面不仅仅让我们少些了很多的代码,而且我们定义的变量或者“函数”具有很强的公用性,以后其他的结构需要这样的样式,我们直接的调取就好了。既然认识到了LESS的强大,那么我们接下来就一步步的学会LESS的使用。
LESS的编译
上述我们提到,编写完成的LESS代码是不能直接在浏览器中运行的,需要编译成正常的CSS代码。那么我们首先就来学习一下常用的LESS编译方式。
1、在浏览器中调用LESS.JS
LESS只支持在现代浏览器中运行(最新版本的Chrome, Firefox, Safari 和 IE)。我们不建议在生产环境中使用LESS客户端,因为在将LESS编译成CSS的时候,用户会看到加载延迟的现象,即便在浏览器中有不足一秒的加载延迟,但也会降低性能。
首先引入我们设置样式的LESS文件,注意:这里的rel=’stylesheet/less’
|
|
其次为了方便开发过程中的调试(上线后我们也可以配置一些必要的参数),我们可以在引入LESS.JS之前设置一些配置的参数。我们一般都把所有的配置参数放在全局变量less中。
|
|
然后引入我们的less.js(下载less.js)
|
|
最后开启监视模式后,只要我们的LESS改变,在一定时间内,浏览器就会重新的编译,我们可以看到想要的效果
2、使用NODE命令编译LESS
这种方式是目前项目中最常用的方式,也是我推荐大家使用的方式,它是把我们的LESS文件编译成CSS文件,我们项目中直接的引入CSS文件即可,基本步骤:安装->编译/压缩编译->或者使用NODE代码实现批量编译等
把LESS模块安装到全局NODE环境中
1npm install less -g使用命令进行编译
1234//->把styles.less文件编译成styles.css文件(如果没有这个CSS文件自己会创建)lessc styles.less styles.css//->编译完成的CSS文件是经过压缩的lessc styles.less styles.min.css -x或者--compress
如果你想要更牛X的压缩,还可以自己单独的设定,下面我们使用–clean-css。这个需要提前的安装less-plugin-clean-css模块才可以。
3、在NODE环境中编写批量编译的代码
我们在上述用NODE命令编译的时候,一次只能编译一个文件,这样,如果页面中有多个LESS,每一次编译都是比较耗费时间的,所以我们结合NODE的FS文件读写操作,可以写一套批量编译的代码。
4、使用工具编译LESS
目前常用的编译工具有:Koala(据说目前最流行的)、在线编译(http://tool.oschina.net/less)、SimpLESS等。关于工具的使用,自己下去下载研究即可,非常的简单,本篇文章不做过多的说明。
【转自珠峰培训】