1. 安装less

  $ npm install -g less

2. less文件编译成css文件

  $ lessc styles.less styles.css

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Less_Test</title> <link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="self.css" />
</head>
<body>
<h1>开始</h1>
<h2>未结束</h2>
<div id="content"> </div>
<a href="#">链接</a>
<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
</body>
</html>

/*此处为编译后的css文件*/

 h1,
h2 {
color: red;
}
#content {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
}
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
#home {
color: blue;
width: 600px;
height: 500px;
border: outset;
}
#home #top {
border: outset;
width:;
}
#home #center {
border: outset;
height: 300px;
width: 90%;
}
#home #center #left {
border: outset;
float: left;
width: 40%;
}
#home #center #right {
border: outset;
float: left;
width: 40%;
}

/*此处为编译前的less文件*/

 @article: red;
@bgcolor: yellow;
.round(@radius:5px) {
border-radius: @radius;
}
h1,h2 {
color: @article;
} #content {
width: 200px;
height: 200px; @bgcolor: green; background-color: @bgcolor;
.round(50%);
} a {
color: red;
text-decoration: none;
&:hover {
color: black;
text-decoration: underline;
};
} #home {
color: blue;
width: 600px;
height: 500px;
border: outset; #top {
border: outset;
width:;
} #center {
border: outset;
height: 300px;
width: 90%;
#left {
border: outset;
float: left;
width: 40%;
}
#right {
border: outset;
float: left;
width: 40%;
}
}
}

参考链接:1.  http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/index.html

     2.  http://lesscss.org/

LESS初探的更多相关文章

  1. 初探领域驱动设计(2)Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

  2. CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  3. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  4. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  5. .NET文件并发与RabbitMQ(初探RabbitMQ)

    本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...

  6. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  7. 【手把手教你全文检索】Apache Lucene初探

    PS: 苦学一周全文检索,由原来的搜索小白,到初次涉猎,感觉每门技术都博大精深,其中精髓亦是不可一日而语.那小博猪就简单介绍一下这一周的学习历程,仅供各位程序猿们参考,这其中不涉及任何私密话题,因此也 ...

  8. Key/Value之王Memcached初探:三、Memcached解决Session的分布式存储场景的应用

    一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...

  9. NoSQL初探之人人都爱Redis:(3)使用Redis作为消息队列服务场景应用案例

    一.消息队列场景简介 “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.消息被发送到队列中,“消息队列”是在消息的传输过程中保存消息的容器 ...

  10. Unity3D游戏开发初探—1.跨平台的游戏引擎让.NET程序员新生

    一.Unity3D平台简介 Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...

随机推荐

  1. HTML中strong与b,em与i标签的区别

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  2. storm基础系列之五---------接入数据收集系统flume

    1.基本结构介绍 flume是三层架构,agent,collector,storage.每一层都可水平扩展. 其中,agent就是数据采集方:collector是数据整合方:storage是各种数据落 ...

  3. vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容

    父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...

  4. CGI

    CGI的工作原理一般是这么定义的: 客户端web浏览器浏览某个主页后,利用一定的方式提交数据,并通过HTTP协议向Web服务器发出请求,服务器端的HTTP Daemon(守护进程)将描述的主页信息通过 ...

  5. windows WSABUF 结构在IOCP 中应用时两个成员变量的意义

    WSABUF 结构的原型如下: typedef struct __WSABUF { u_long len; char FAR *buf; } WSABUF, *LPWSABUF; 该结构在IOCP 中 ...

  6. boost asio tcp server 拆分

    从官方给出的示例中对于 boost::asio::ip::tcp::acceptor 类的使用,是直接使用构造函数进行构造对象,这一种方法用来学习是一个不错的方式. 但是要用它来做项目却是不能够满足我 ...

  7. Tornado实战项目(伪JD商城)

    预备知识 在之前tornado商城项目中,在开始之前需要引入一些项目设计知识,如接口,抽象方法抽象类,组合,程序设计原则等,个人理解项目的合理设计可增加其灵活性, 降低数据之间的耦合性,提高稳定性,下 ...

  8. 开源的运维机器人hubot原理

  9. EJB 教程推荐

    EJB教程 EJB概述 EJB创建应用 EJB无状态Bean EJB有状态会话Bean EJB持久性 EJB消息驱动Bean EJB注解 EJB回调 EJB定时器服务 EJB依赖注入 EJB拦截器 E ...

  10. Android RelativeLayout用到的一些重要的属性

    转载自 http://mobile.51cto.com/android-265842.htm 第一类:属性值为true或false android:layout_centerHrizontal  水平 ...