手记

带你认识Less

如今的前端,玩起来的花样真是五花八门,抽空花了点时间,整理了这篇文章,涉及的知识不深,但用起来还是很舒服的,就算是认识一下这个强大的less吧,好,废话不多说,进入正题。

认识Less

1.首先它是干嘛的

2.如何配置它

3.用sublime编辑器如何让它的代码高亮,提升编码质量

4.它的语法难吗

5.我要怎么编译它,转成我要用的css(基于less的工具,node实现)


我们先来看下官网怎么说的

一种动态样式语言.

LESS将CSS赋予了动态语言的特性,如变量,继承,运算,函数. LESS既可以在客户端上运行(支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。

也就是说它最终输出的还是我们所认识的css, 它具有动态的语言特性。所以,它最终还是一个工具,并不是取代我们的css,这一点要记住。既然是工具,那一定有它的运行环境:

环境配置

我在用的时候,看过别人的博客写的一些文章,有讲在浏览器端引入less.js文件的等等用法,但是我个人认为,有好的工具可以用,为什么要纠结怎么用呢,比如基于webpack的,这些都是很好的工具。下面我给大家分享一下我个人用的工具(当然,各有所好,你也可以去官网上把方法都试一下)

因为是基于node的,所以第一步要搭建好node环境:(因为不是重点介绍node,所以简单的搭建一下)

Node.js安装包及源码下载地址为:https://nodejs.org/en/download/

官网有不同操作系统的版本,根据你的电脑,下载合适的版本进行安装。

详细参考这里:http://www.runoob.com/nodejs/nodejs-install-setup.html

安装好以后我是试一下是否安装成功:(命令行工具 windows:在开始那打cmd )

node --version   npm --version (安装好后这个包工具一般自带)

成功它会返回版本号

简单的搭建就到这里,下面我们进入今天要讲的less


命令行输入:

npm install less -g  (-g全局可以使用,就是你在d盘和桌面都可以调用它)

你也可以指定版本号:

npm install less@1.6.2 -g

当然你也可以检测它是否安装成功:

lessc --version (注意输入的是lessc)

使用它:

Usage: lessc [option option=parameter ...][destination]

给大家一个实例:

lessc -x ./less/index.less main.css

意思就是用这个编译工具去编译当前目录less文件夹下的index.less文件 编译成功后,结果输出到当前目录下的main.css文件中,如果不存在main,会自动创建,这里只需要在html文件中引入main.css的文件就可以了。这个工具的好处是,它可以压缩代码,很神奇吧~~


对于有强迫症的同学来说,当你很努力的敲上一段代码时,你的编辑器全是灰灰的代码,估计连继续写下去的想法都没有了~。这里给大家介绍一个sublime的插件,可以高亮less文件中的代码哦~~~

下载地址:https://github.com/danro/LESS-sublime/zipball/master

如何去安装它(sublime)

菜单栏首先找到首选项,选择第一个,它会打开浏览插件的目录,然后新建less的目录,将你刚刚下载的压缩包解压到那个文件夹,ok安装好。紧接着使用它就好了,来看图:

点击右下角,选择LESS,重新启动它就好啦~~

是不是很简单~~~


语法介绍

给大家介绍常用的用法:

1.变量

恩,这个词不陌生,js中常提到。

@color: red;

body{ background: @color;}

从代码看,很容易理解,就是将需要的值存在一个代码中,可以带不同的地方调用它。改的时候,只需要改一处就好了。

2.混合

先看一个代码:

是不是看上去很简洁呢? less还是很强大的。

3.嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。


4.函数&运算

运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。

这里要提的是,不能瞎运算,举个例子,可能你会疏忽这样写: .red(@length*4) ,不信的话,你编译一下,它会报错的。

5.注释

CSS 形式的注释在LESS 中是依然保留的

LESS 同样也支持双斜线的注释, 但是编译成CSS 的时候自动过滤掉

6.其他

当然less还有一些高级语法,在这里就不一一介绍了,给大家贴个手册,感兴趣的,看一看。

LESS:



别人曾经在学习上给了我很大的帮助,如今我也想写点东西去帮助别人,仅此而已



作者:可爱的圣诞老人
链接:https://www.jianshu.com/p/f90bcd11f8ba


1人推荐
随时随地看视频
慕课网APP