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. ionic 启用sass

    转入ionic项目目录,命令行下执行:ionic setup sass 提示编译器未装: You have specified Ionic CI to set up sass.However, you ...

  2. wkhtmltopdf乱码解决方案

    在CentOS下使用wkhtmltopdf将html页面转换成pdf的时候对于某些页面可能会出现转换成的pdf中很多字符乱码的情况,更怪异的是直接在命令行下运行一切正常,但在httpd+php下使用却 ...

  3. day3 字典，集合，文件

    一.深浅copy 浅copy只copy第一层,不copy第二层.copy后,第一层指向不同内存地址.第二层指向相同的内存地址. 导入copy模块,deepcopy深copy.deepcopy后,均指向 ...

  4. 【linux编程】linux中HZ和Jiffies的关系

    读cubic源码的时候遇到了HZ和jiffies,不懂这两者代表什么.网上描述的是这样的 全局变量jiffies用来记录自系统启动以来产生的节拍的总数.启动时,内核将该变量初始化为0,此后,每次时钟中 ...

  5. CentOS7：搭建SVN ＋ Apache 服务器

    1. 安装httpd 安装httpd服务: $ sudo yum install httpd 检查httpd是否安装成功: $ httpd -version Server version: Apach ...

  6. Python多线程join的用法

    import threading, time def Myjoin(): print 'hello world!' time.sleep(1) for i in range(5): t=threadi ...

  7. 解决VS2012上面EF字段说明备注没有的方法

    VS2012中的EF有一个BUG 如下: 明明在数据库上面是写有字段说明的到了EF上面就没有了很郁闷: 网络上面有一个解决方法如下: http://www.cnblogs.com/stone_w/ar ...

  8. mongoosejs model mapping to collection name

    mongoosejs 是一个对象模型工具,将mongodb的collection中的Document映射为Model 典型用法如下 var mongoose = require('mongoose') ...

  9. 安装部署完office web apps 后，无法浏览Word

    安装部署完office web apps 后,在sharepoint 2010浏览器中浏览Word提示:“由于出现意外错误,Word Web App 无法打开此 文档 进行查看. 要查看此 文档,请在 ...

  10. oracle查询中文数据出现乱码

    首先,在oracle中,输入select userenv('language') from dual,查询出oracle使用的编码方式,我的是SIMPLIFIED CHINESE_CHINA.ZHS1 ...