Less-学习前的准备工作

学习less，我们肯定要有相应的环境，我们预览网址

http://www.1024i.com/demo/less/

提供了2种方法，我们采用服务端用法，不过只是用前半部分，就是把写好的less文件转为css文件，html引用的还是css文件，仅仅作为css开发工具

我们要做的一些工作

1.nodejs的安装，这个不多说

http://my.oschina.net/u/2352644/blog/487488

2.安装less，我们进入cmd窗口执行

npm install -g less

3.检测less是否安装

lessc -v

4.都无提示表示成功安装，这些步骤非常简单

5.我们创建一个文件夹，我的叫 lessdemo，下面创建demo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>less</title>
<link rel="stylesheet" type="text/css" href="less.css"/>
</head>
<body>
 <div class="demo">less</div>
</body>
</html>

6.我们在lessdemo下创建less.less文件，里面会写入被less支持的语法，less对css兼容，我们放入一段原生css

.demo{
height: 93px;
color: #000;
font-size: 22px;
line-height: 93px;
border-radius: 10px;
overflow: hidden;
width:200px;
border:1px solid #000;
}

7.lessdemo下有以下文件

我们预览demo.html，是不带样式的，因为没有less.css

8.我们cmd窗口切换到lessdemo文件夹

我的命令：

cd nodejs/lessdemo

9.当前目录找到，已经写好了less.less，我们执行less命令，进行编译

lessc less.less>less.css

10.我们在lessdemo下就可以看到编译生成的less.css了，预览html页面，看到有圆角和高度等样式的内容

11.其他

1.我们先到定位到存放less文件目录

2. lessc 编译命令

3. > 表示编译后的css存放在当前目录下

作为前端，肯定没用过也会听说过less这种预处理css，比较热门的除了less还有sass和styuls

sass是最早出现的，我们知道css非常简单，是不带语法的，开发人员为了让他带有语言功能，这门技术出现了，sass对比less语法更严格

less是在sass之后出现，借鉴了sass，语法上比较接近css

styuls这是来自nodejs社区，为node开发提供的预处理css技术

对比之下我们学习less和styuls比较适合前端，不过less应用的更多一些，学习预处理css技术，我们入门就从学习less开始！

来源：oschina

链接：https://my.oschina.net/u/2352644/blog/517974

标签

less