写在前面:
我们都知道写 CSS 是一个蛮痛苦的过程,而且很机械.俗话说的好:哪里有需求,那里就会有东西出来.
呃....这话说的真拗口.
反正知道 less 是一个很牛逼的东西就可以了.他为 CSS 带来了"预编译"这样的一个概念.让写 CSS 不在枯燥乏味,好了,废话不多说.直接上菜,开更:
1.less的基本概念
1.1 Less的介绍
1.2less的安装
1.3less的应用
2.less 的一个概念
这里有less 的一个中文网站:
这里补充一点less的知识:
less是CSS的预处理机制.看下面的一个图示解释:
简单的一个介绍
使用 less开发的文件的后缀是一个.less的文件,经过编译之后就会变成一个CSS文件.
使用 less可以让我们使用更少的代码来做更多的事情.
3.less的安装
文件我已经下载在了桌面上面.其实就是less.js文件而已.如下图所示:
本地 less 文件
那么如何去使用这个东西呢?看下面的一个文件所示:
用法
注意:
虽然浏览器可以编译 less 文件,但是很消耗性能.所以一般我们在本地将 less 文件编译为 css 文件!切记切记!
4.less的编译
因为LESS是无法在浏览器中直接进行执行的,所以我们要进行一个编译,将xx.less文件编译为xx.css文件.但是官方只提供了命令行的编译方式,这个就不是很好了.不是很直观,命令行的一个编译代码就是:
lessc xx.less > yy.css
xx.less是我们写的less文件,yy.css是编译之后生成的目标文件.
所以!!!这里我们的国人就给大家写了一个less的编译工具.就是koala.她是一个可视化的编译工具.下载和安装都是很简单的.见下面的图示:
koala 编译器
使用"考拉"来编译 CSS文件还是很简单的,没有啥子问题.直接拖进去.然后编译就可以了.
写在最后:
当我们考虑用less来写 CSS的时候,编译完毕之后,当我们修改LESS文件的时候css文件也会发生改变.而且以后我们如果要修改样式的时候.这个时候我们就要修改 less文件了,而不是修改css文件!切记切记!
当我们在修改less的值的时候, css文件中的代码也会进行一个响应的改变.
网友评论