Less基础例子

2016-12-15 本文已影响277人该帐号已被查封_才怪

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相关资料：*/

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

Less基础例子

猜你喜欢

热点阅读