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. Java 和C/C++的“语法”上的差异！

    额其实认为语言语法之间是没有可比性的! 但是因为额曾经学过C/C++,而今又学Java,有赵本山说的话:“知识都学杂了!”,所以我个人总结一下,望提醒自己! Java C++ double 要用%f: ...

  2. putty远程连接ubuntu

      步骤一.在ubuntu系统中安装ssh,可使用如下的命令进行安装: sudo apt-get install openssh-server步骤二.为了保险起见,安装完成后重启一下ssh服务,命令如 ...

  3. 集合Collection

    /* * 集合的由来: * 我们学习的是面向对象语言,而面向对象语言对事物的描述是通过对象体现的,为了方便对多个对象进行操作,我们就必须把这多个对象进行存储. * 而要想存储多个对象,就不能是一个基本 ...

  4. Spark Job的提交与task本地化分析（源码阅读八）

    我们又都知道,Spark中任务的处理也要考虑数据的本地性(locality),Spark目前支持PROCESS_LOCAL(本地进程).NODE_LOCAL(本地节点).NODE_PREF.RACK_ ...

  5. weblogic端口号修改和内存参数配置

    1 端口号修改 如图 是详细路径 注:我用的weblogic版本是10.3 当刚创建完域的时候这个配置文件下没有Listen-port参数  第一次去控制台修改端口后就这个参数了

  6. 关于a标签点击会出现的背景色的问题

    同事今天在tap里面有a标签,并且给a标签块化之后,点击tap切换时会出现背景色,解决方案: body { margin: 0 auto; max-width:100%; background: #f ...

  7. 汇编语言学习与Makefile入门

    继续开发 ; hello-os ; TAB= ORG 0x7c00 ; 指明程序的装载地址 ; 以下的记述用于标准FAT12格式的软盘 JMP entry DB 0x90 DB "HELLO ...

  8. 如何在Delphi里面查看程序的汇编代码？

    开发工具:Delphi 10 Update2 1,在源代码中设置至少一个断点,目的让我们进入调试模式. 2,启动调试,当程序进入调试模式,停留在我们设定的断点处时候,使用快捷键"CTRL+A ...

  9. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  10. vs2010下C++调用lib或dll文件

    注: DLL:表示链接库,包含dll,lib文件: dll: 表示my.dll文件 lib: 表示my.lib文件 C++ 调用.lib的方法: 一: 隐式的加载时链接,有三种方法 1  设置工程的 ...