Less-客户端使用

最新推荐文章于 2024-05-28 14:55:00 发布

weixin_34162228

最新推荐文章于 2024-05-28 14:55:00 发布

阅读量209

点赞数

文章标签： php javascript 数据库 ViewUI

原文链接：https://my.oschina.net/tbd/blog/518832

版权

为什么80%的码农都做不了架构师？>>>

less官网地址：http://www.1024i.com/demo/less/

使用客户端less，我们可以看到这么几个要点：

1.引用less.js文件，less文件解析

2.less.js是发送ajax请求的，需要走www协议，我们要是服务器环境下测试我们的html页面，纯静态打开不可以

3.就是less文件的引入，格式如下 <link rel="stylesheet/less" href="example.less" />

既然注意点已经总结完毕，我们针对注意搭建我们客户端less的环境：

1.我们服务端环境就是基于php的，阿帕奇+php+mysql集成安装通过appsever实现：

http://my.oschina.net/u/2352644/blog/490351 按步骤操作，直到demo浏览成功。

2.同上一次一样，我们不是在nodejs下创建了demoless目录和相关less，html文件，直接全部放入appsever的www目录下。

3.我们直接在浏览器地址栏打入如下地址：

http://localhost:8080/lessdemo/demo.html

4.我们的文件目录包含：

demo.html

less.css

less.less

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">
     <div class="demo-header">
         <span class="left">标题</span>
            <a href="#2" class="right">更多</a>
        </div>
        <div class="demo-con">
         <a href="#2">1111111111</a>
            <a href="#2">22222222222</a>
            <a href="#2">33333333333</a>
            <a href="#2">4444444444</a>
            <a href="#2">555555555</a>
        </div>
    </div>
</body>
</html>

当前引入还是css文件

css文件：

.left {
  float: left;
}
.right {
  float: right;
}
.he50 {
  height: 50px;
  line-height: 50px;
}
.demo {
  width: 500px;
  height: 500px;
}
.demo .demo-header {
  height: 50px;
  line-height: 50px;
}
.demo .demo-header span {
  color: #000;
}
.demo .demo-header a {
  color: #ddd;
  float: right;
  margin: 0 10px;
}
.demo .demo-header a:hover {
  color: #ffa;
}
.demo .demo-con a {
  display: block;
  height: 50px;
  line-height: 50px;
  color: #ddd;
}
.demo .demo-con a:hover {
  color: #ffa;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

通过下面编译而成

less文件：

.left{float:left;}
.right{float:right;}
@colorlink:#ddd;
@colorhover:#ffa;
.he50{
 height:50px;
 line-height:50px;
}
.demo{
 width:500px;
 height:500px;
 .demo-header{
  .he50;
  span{
   color:#000;
  }
  a{
   color:@colorlink;
   float:right;
   margin:0 10px;
   &:hover{color:@colorhover;}
  }
 }
 .demo-con{
  a{
   display:block;
   .he50;
   color:@colorlink;
   &:hover{color:@colorhover;}
  }
 }
}

5.我们按照注意点，将html页面引入的less.css文件改为less.less，做如下修改，注意引入less外部文件要修改rel属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>less</title>
<link rel="stylesheet/less" href="less.less" />
</head>
<body>
 <div class="demo">
     <div class="demo-header">
         <span class="left">标题</span>
            <a href="#2" class="right">更多</a>
        </div>
        <div class="demo-con">
         <a href="#2">1111111111</a>
            <a href="#2">22222222222</a>
            <a href="#2">33333333333</a>
            <a href="#2">4444444444</a>
            <a href="#2">555555555</a>
        </div>
    </div>
</body>
</html>

刷新地址，我们预览页面，发现样式都没有了，这是正常的，我们虽然有less文件，并且被引用，不过是不被是别的，我们缺少最重要的less.js解析文件，我们继续处理

6.less.js也就是客户端less解析文件下载和引用

下载地址：https://github.com/less/less.js

解压后找到dist下的less.js和less.min.js复制到我们的lessdemo目录下

我们html页面引入less.js或者less.min.js未压缩和压缩版。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>less</title>
<link rel="stylesheet/less" href="less.less" />
<script type="text/javascript" src="less.js"></script>
</head>
<body>
 <div class="demo">
     <div class="demo-header">
         <span class="left">标题</span>
            <a href="#2" class="right">更多</a>
        </div>
        <div class="demo-con">
         <a href="#2">1111111111</a>
            <a href="#2">22222222222</a>
            <a href="#2">33333333333</a>
            <a href="#2">4444444444</a>
            <a href="#2">555555555</a>
        </div>
    </div>
</body>
</html>

再次浏览页面，我们发现less.less被转为css并且样式可用，我们可以审查元素查看那些被客户端解析好的css。

7.发现的问题，我们使用客户端解析办法，是要先下载less.less文件和less.js，然后js文件去解析less转为css，这样的操作无疑会使我们页面样式显示变慢。

转载于:https://my.oschina.net/tbd/blog/518832