您的位置:首页
less的使用
2017-04-06 12:21
67 查看
1.浏览器直接使用——最简单的用法(不推荐使用,性能差)
引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
然后点击页面顶部download按钮下载 less.js, 在<head> 中引入:
注意你的less样式文件一定要在引入less.js前先引入。
请在服务器环境下使用!本地直接打开可能会报错!(用Firefox可以不依赖服务器)
可以看到Chrome会报出这个错误,本地直接打开而不依赖服务器软件话是不能用http协议的,自然XHR就不能工作了。less.js就是利用XHR来请求less文件里的源码的。
2.在服务器端使用
2.1命令行下编译less文件
在全局安装less
之后可以在cmd里面直接使用less编译了
2.2直接在命令行下编译字符串less代码
输出
调用解析器把字符串less代码输出到文件
3.推荐一个开源的预处理语言图形编译工具——Koala
使用极其简单只要下载安装后,把项目拖入软件内选择less文件,按“Compile”就可以在同一个目录下生成css文件了
引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
然后点击页面顶部download按钮下载 less.js, 在<head> 中引入:
<script src="less.js" type="text/javascript"></script> //或者官方CDN加速的<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
注意你的less样式文件一定要在引入less.js前先引入。
请在服务器环境下使用!本地直接打开可能会报错!(用Firefox可以不依赖服务器)
可以看到Chrome会报出这个错误,本地直接打开而不依赖服务器软件话是不能用http协议的,自然XHR就不能工作了。less.js就是利用XHR来请求less文件里的源码的。
2.在服务器端使用
2.1命令行下编译less文件
在全局安装less
$ npm install -g less
之后可以在cmd里面直接使用less编译了
2.2直接在命令行下编译字符串less代码
var less = require('less'); less.render('.class { width: 1 + 1 }', function (e, css) { console.log(css); });
输出
.class { width: 2; }
调用解析器把字符串less代码输出到文件
var parser = new(less.Parser)({ paths: ['.', './lib'], // Specify search paths for @import directives filename: 'style.less' // Specify a filename, for better error messages }); parser.parse('.class { width: 1 + 1 }', function (e, tree) { tree.toCSS({ compress: true }); // Minify CSS output });
3.推荐一个开源的预处理语言图形编译工具——Koala
使用极其简单只要下载安装后,把项目拖入软件内选择less文件,按“Compile”就可以在同一个目录下生成css文件了
相关文章推荐
- cat more less 等命令的区别与使用—管道
- 使用ActionlessForm.cs重写Form后使得验证控件失效的解决方法
- greater<int>()和less<int>()的使用
- Less的简单使用
- 如何使用jquery实现一定长度的文字/More/Less
- Grunt再体验:支持LESS,Mocha,使用cron来定期运行Grunt Task
- centos 学习日记 less 学会使用一个文件内容查阅
- Openstack中less的使用和安装
- asp.net 中使用less
- 使用jdbcTemplate.queryForRowSet()遇到UncategorizedSQLException:Invalid precision value. Cannot be less than zero解决办法
- less的使用
- 浅谈习惯使用less命令的重要性,让less命令“丰富多彩”
- 淘宝模板开发系列之Less使用
- 使用LESS或Sass重构CSS代码
- 使用LESS或Sass重构CSS代码
- 使用LESS或Sass重构CSS代码
- 11.8 如何使用CSLA自定义验证:LessThanValue,BiggerThanValue ?
- 使用 Ansible 部署无服务(serverless)应用
- sass、less和stylus的安装使用和入门实践