less使用方式

责编:menVScode 2018-03-11 15:09 阅读(186)

1、直接引入less.js文件    

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>less</title>
	<link rel="stylesheet/less" href="./css/style.less" />
	<script src="./js/less.min.js"></script>
</head>
<body>
    less
</body>
</html>

好处:获取到客户端的数据,从而进行进一步计算。坏处:在客户端解析less,造成性能浪费,不利于维护。


2、koala 编译器

koala 下载地址:http://koala-app.com/index-zh.html

【1】安装好koala后打开软件,点击导入css文件

QQ截图20180311161231

【2】设置css文件编译后的输出路劲

QQ截图20180311161418

【3】执行编译

QQ截图20180311161612

设置完成后,会自动实时编译less文件。编译方式有两种:normal(正常),compress(压缩模式)。


3、在服务器环境编译:node、npm。

在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器)

$ npm install less -g

如果你想下载最新稳定版本的 LESS,可以尝试像下面这样操作:

npm install less@latest -g

命令行输入:lessc 检测less有没有安装成功。

命令行打包方式,想将编译后的 CSS 压缩掉,那么加一个 -x 参数就可以了。

$ lessc styles.less > styles.css


4、在编辑器中设置实时编译。

烦,不介绍~~~

标签: less 考拉
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码