文档章节

Less-客户端使用

透笔度
 透笔度
发布于 2015/10/19 13:05
字数 894
阅读 100
收藏 1

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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,这样的操作无疑会使我们页面样式显示变慢。

© 著作权归作者所有

透笔度
粉丝 83
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
Exchange Server 2010 LAB Part8.客户端访问阵列和负载均衡

关于Exchange 2010客户端访问服务器: 在以往版本Exchange 2007中,开始引入了客户端访问服务器角色,用于处理客户端传入的连接,虽然大多数类型的客户端连接方式如POP3、IMAP4等都是有客户端...

XuTonglin
2014/04/13
0
0
Https的SSL与TLS协议模型

协议模型: 第一步(客户端/服务器的证书,随机数,算法,协议交换): 客户端产生随机数RNC 客户端发送客户端的证书,协议(SSL/TLS),算法信息,RNC给服务器. 服务断接收到请求,产生服务端的随机数RNS...

最爱肉肉
2016/12/21
56
0
8 个实用的 Linux netcat 命令示例

Netcat 或者叫 nc 是 Linux 下的一个用于调试和检查网络工具包。可用于创建 TCP/IP 连接,最大的用途就是用来处理 TCP/UDP 套接字。 这里我们将通过一些实例来学习 netcat 命令。 1. 在服务器...

红薯
2012/04/23
30.4K
29
客户端之间使用透明通道传输文件数据

AnyChat具有缓冲区及文件传输功能,可以实现客户端与客户端之间的缓冲区和文件传输,也可以实现客户端与服务器之间的缓冲区和文件传输功能(V4.1版本新增功能)。 AnyChat客户端之间的缓冲区...

AnyChat
2014/12/02
127
0
注解 @EnableFeignClients 工作原理

本文分析所用源代码基于Spring Cloud 2.1.0 RELEASE 概述 在Spring cloud应用中,当我们要使用feign客户端时,一般要做以下三件事情 : 使用注解@EnableFeignClients启用feign客户端; 示例 ...

群星纪元
04/02
122
0

没有更多内容

加载失败,请刷新页面

加载更多

Java8新特性,语法学习

package com.example.demo.java8;import com.example.demo.domin.User;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import java.util.stream.Co......

Gx_ww
7分钟前
4
0
type()和isinstance()之间有什么区别?

这两个代码片段之间有什么区别? 使用type() : import typesif type(a) is types.DictType: do_something()if type(b) in types.StringTypes: do_something_else() 使用isinsta......

javail
7分钟前
6
0
Flink-本地设置教程

设置:下载并启动Flink 启动本地Flink群集 阅读代码 运行示例 下一步 通过几个简单的步骤即可启动并运行Flink示例程序。 设置:下载并启动Flink Flink在Linux,Mac OS X和Windows上运行。为了...

sunwuhan
10分钟前
2
0
RPA是什么?RPA发展极简史

眼下,RPA(机器人流程自动化)技术爆火于科技圈与投资界,并持续引发新一轮的数字化变革。 与过去几年间的很多技术投资热点不同,如今RPA技术被资本方和市场方广为看好,原因有二:一是RPA...

UiBot
11分钟前
5
0
超级账本Fabric的交易背书过程解读

Hyperledger Fabric和其他许多区块链的关键区别之一,就在于Fabric区块链的交易执行过程:Fabric交易需要首先通过节点的背书,然后再进行交易排序,最后才利用有序交易进行账本的更新。本文将...

区块链教程
13分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部