带你认识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:



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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容