LESS赋予了CSS动态语言特性如：变量、函数、继承及运算等；LESS既可以在客户端运行（(支持IE 6+, Webkit, Firefox)），也可以借助Node.js或者Rhino在服务端运行。
刚写了个简单的less应用：
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>less简单例子</title>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<!-- less样式文件一定要在引入less.js前先引入。 -->
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
</head>
<body>
<!-- 变量的用法 -->
<h1>我是h1</h1>
<h2>我是h2</h2>
<!-- 混合用法 -->
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<!-- 嵌套用法 -->
<div id="inner">
我是id为inner的div
<h3>我是id为inner的div里的h3</h3>
<p>我是id为inner的div里的p
<a href="#">我是p里的a链接</a>
</p>
</div>
<!-- 函数及运算的用法 -->
<div class="func1">
我是class为func1的div
</div>
<div class="func2">
我是class为func2的div
</div>
</body>
</html>
样式文件：
@color:red;
h1{
color:@color;
}
h2{
color:@color;
}
.rounded-corners (@radius: 3px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#div1{
.rounded-corners;
}
#div2{
.rounded-corners(10px);
}
#div1,#div2{
border:1px solid #333;
margin:10px;
height:40px;
line-height:40px;
}
#inner{
h3{
color:@color;
}
p{
color:green;
a{
text-decoration: none;
&:hover{
color:@color;
}
}
}
}
@the-border:1px;
@base-color:#111;
@black: #ff0000;
.func1{
color:@base-color*3;
border:@the-border*5 solid @base-color*3;
border-radius: @the-border*10;
height:40px;
}
.func2{
color:@base-color + #003300;
border:10px solid desaturate(@black, 50%);
margin:10px;
}
在线预览地址：http://output.jsbin.com/pumizukoji
注意：
1、在客户端上运行less需要在服务器环境下使用！本地直接打开会报错！
2、注意你的less样式文件一定要在引入less.js前先引入；
使用less时，我们不会让其直接在生产环境中（即用户的浏览器中）运行，我们只是在开发环境中使用它。
我们编写完less后。可使用gulp编译工具gulp-less 对less文件进行解析。
具体步骤如下：
1、npm init；
输完后，它会提示我们输入以下信息(其实就是配置package.json文件)：
"name":
/*该处不能填与模块名相同的名字，比如我刚开始填了less，就报错：
Refusing to install less as a dependency of itself
其实就是提示： 我们package.json文件的name名字不能跟npm模块相同*/
"version":
"description":
"main":
/* main 字段指定了加载的入口文件 我写了gulpfile.js*/
"scripts": {
"test":
},
/*scripts
指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start
时，所要执行的命令。*/
"author":
"license":
关于package.json的文件详解建议看阮一峰的这篇文章
2、npm install gulp;
3、npm install gulp-less;
4、npm install --save path；（ gulp-less后面运行需要用它）
5、npm install gulp-clean-css --save-dev （压缩css用）;
6、配置gulpfile.js文件
我的gulpfile.js内容：
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var less = require('gulp-less');
var path = require('path');
gulp.task('less', function() {
return gulp.src('./*.less')
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')] //解析less将其转换成css
}))
.pipe(cleanCSS({ compatibility: 'ie8' }))//这一步是压缩css
.pipe(gulp.dest('./public-Min/css'));
});
我的package.json文件内容：
{
"name": "less1",
"version": "1.0.0",
"private": true,
"description": "no descrip",
"main": "gulpfile.js",
"scripts": {
"test": "test command"
},
"author": "lic",
"license": "ISC",
"dependencies": {
"path": "^0.12.7"
},
"devDependencies": {
"gulp-clean-css": "^2.3.0"
}
}
7、gulp less；
/* 最后补充下less相关资料：*/
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
网友评论