less的安装使用和入门实践

时间:2024-11-04 23:03:32

1、简介

LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

具体语言特性详见:http://www.bootcss.com/p/lesscss/

2、LESS的安装

less安装分为两种:客户端和服务器端

a、客户端安装

在官网下载一个JavaScript 脚本文件“less.js”,然后在需要引入LESS源文件的html的<head>中加入如下的代码

<link rel="stylesheet/less" type="text/css" href="/styles.less">
<script src="/less.js" type="text/javascript"></script>

这里要注意,在引入“.less”文件时,“link”的“rel”属性要设置为“stylesheet/less”。

还要注意:less源文件一定要在“less.js”引入之前引入,这样才能保证LESS源文件正确编译解析。

b、服务器端安装

利用node的包管理器(npm)安装LESS

1、首先到Node JS的官网下载一个适合Windows 系统的安装文件

less的安装使用和入门实践

2、打开.msi文件,运行

less的安装使用和入门实践

less的安装使用和入门实践

3、检查path环境变量是否配置了Node.js,点击开始=》运行=》输入cmd=》输入命令“path”,输出结果如下

less的安装使用和入门实践

4、启动Node Js的command 控制面板直接输入命令:

$ npm install less

less的安装使用和入门实践

less的安装使用和入门实践

找到你要编译的less文件目录,编译less文件,输入如下命令:

$ lessc color.less > color.css

这时候就在文件夹下生成了 .css文件。

c、除了上面的命令转译LESS源文件之外,还有一个第三方开发的工具,比较常用的是WinLess工具,简单易用

下载地址:http://winless.org/

less的安装使用和入门实践

点击Add folder,添加要编译的less文件目录,右侧加载less文件,如果没有加载好,点击右侧窗口的Refresh,刷新目录结构。

选中要编译的less文件,compile 完成编译,如果less文件有错误,编译会失败报错,成功编译会在文件下生成相应的.css文件。

less的安装使用和入门实践