Less-学习前的准备工做

时间 2019-11-11

标签学习准备繁體版

原文原文链接

学习less，咱们确定要有相应的环境，咱们预览网址css

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

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

咱们要作的一些工做node

1.nodejs的安装，这个很少说npm

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

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

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开始！