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. Intellij IDEA +MAVEN+Jetty实现Spring整合Mybatis

    1 pom.xml(这里出现transaction错误,是版本的问题) <project xmlns="http://maven.apache.org/POM/4.0.0" ...

  2. 黄聪：css3实现图片划过一束光闪过效果(图片光影掠过效果)

    CSS代码 .guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;} .gua ...

  3. Python 字符串格式化

    Python 字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存 一 ...

  4. Java多线程系列- DelayQueue延时队列

    我们在开发中,有如下场景 a) 关闭空闲连接.服务器中,有很多客户端的连接,空闲一段时间之后需要关闭之.b) 缓存.缓存中的对象,超过了空闲时间,需要从缓存中移出.c) 任务超时处理.在网络协议滑动窗 ...

  5. oracle之集合操作函数---minus、union、intersect

    集合操作符专门用于合并多条select语句的结果,包括:UNION,UNION ALL,INTERSECT,MINUS.当使用集合操作函数时,需保证数据集的字段数据类型和数目一致. 使用集合操作符需要 ...

  6. [Mongdb] 关于Replica Set复制集奇数成员限制的解释--待完善

    一.缘由: http://blog.itpub.net/29254281/viewspace-1176821/ http://blog.chinaunix.net/uid-20726500-id-54 ...

  7. weave 建立跨节点docker网络

    weave的工作原理上与利用openvswitch建立vxlan基本一样,都是通过用三层的协议封装二层的报文来进行扩展,weave使用的是udp.weave封装了docker,在操作上为我们隐藏了很多 ...

  8. 检测文件是否有BOM 头，并删除BOM头（php）

    将下面文件放在网站根目录访问即可,它会遍历当前目录下所有子目录,检测文件是否含有BOM头,并删除BOM头 <?php //remove the utf-8 boms //by magicbug ...

  9. SpringMVC实例分析

    Spring的MVC模块 Spring提供了自己的MVC框架实现,相比Struts.WebWork等MVC模块,Spring的MVC模块显得小巧而灵活.Spring的MVC使用Controller处理 ...

  10. java关于值传递和引用传递的有趣试验

    上代码: public class Demo { public static void main(String[] args) { test_1(); test_2(); } public stati ...