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. Xxtea加解密

    转自:http://www.cnblogs.com/luminji/p/3406407.html 很有意思的一件事情,当我想要找 Xxtea 加解密算法的时候,发现了前同事(likui318)的代码, ...

  2. OAF_开发系列11_实现OAF通过DataBoundValues动态显示表列的左右对齐

    20150712 Created By BaoXinjian

  3. jQuery的编码标准和最佳实践

    不知道在哪里看到了这篇关于jQuery编码的文章,挺实用的,恰好最近在研究jQuery的基础知识,今天打开收藏夹来翻译一下,原文的英语不难,但是内容很实用,可能有大神已经翻译过了,大家看精华就行了. ...

  4. 利用swap技巧去除容器多余的容量

    假设我们预先为容器添加了一部分元素,接着用clear将它们删除,容器内部分配的存储空间实际上不会减小,改变的只是能够访问的元素个数.如下所示: std::vector<int> vec; ...

  5. install cpanm

    wget http://cpanmin.us mv index.html cpanm chmod +x cpanm

  6. 我的 Kernel

    求真 工作之后,渐渐与人打交道,人情世俗也慢慢接触了,领了工资之后,也可以买一些自己喜欢的东西,感觉也开始像一个独立完整的人了. 所见所闻也有所想了,有些理念开始慢慢转变了.但是,不知道为什么,对于假 ...

  7. Eclipse点击工程结构里任意文件或文件夹变拖动（或复制）的bug

    本文为原创文章,欢迎转载,但请注明出处http://www.cnblogs.com/yexiubiao/p/5204601.html,未在文章页面明显位置给出原文连接的,将保留追究法律责任的权利. 在 ...

  8. Linux下创建新用户

    useradd -h查询使用方法 useradd -g sysadmin -d /home/devops -m -c "DevOps Installation User" -s / ...

  9. session保存用户信息

    前台jsp-------------- <%@ page import="com.manager.form.User" %><%User user = reque ...

  10. Windows MFC 两个OpenGL窗口显示与线程RC问题

    问题为:背景界面是一个OpenGL窗口(对话框),在其上弹出一个OpenGL窗口(模态对话框)时, 1.上方的OpenGL窗口能响应鼠标操作等并刷新: 2.当移动或放大缩小上方的OpenGL窗口时,其 ...