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. mybatis实战教程(mybatis in action)之十：mybatis SqlSessionSupport 的使用,构件DAO 层的应用

    前面的系列mybatis 文章,已经基本讲到了mybatis的操作,但都是基于mapper隐射操作的,在mybatis 3中这个mapper 接口貌似充当了以前在ibatis 2中的 DAO 层的作用 ...

  2. loss function与cost function

    实际上,代价函数(cost function)和损失函数(loss function 亦称为 error function)是同义的.它们都是事先定义一个假设函数(hypothesis),通过训练集由 ...

  3. collectionview使用

    创建UICollectionViewFlowLayout 对象来设置相关的布局,包括itemSize,headerReferenceSize,sectionInset.设置对应的布局大小,相关的和顶部 ...

  4. Codeforces Round #383 (Div. 2) D. Arpa's weak amphitheater and Mehrdad's valuable Hoses(分组背包+dsu)

    D. Arpa's weak amphitheater and Mehrdad's valuable Hoses Problem Description: Mehrdad wants to invit ...

  5. 线程Thread，有参数和参数

    一.不带参数的 using System; using System.Collections.Generic; using System.Text; using System.Threading; n ...

  6. php 获取远程图片保存到本地

    php 获取远程图片保存到本地 使用两个函数 1.获取远程文件 2.把图片保存到本地 /** * 获取远程图片并把它保存到本地 * $url 是远程图片的完整URL地址,不能为空. */ functi ...

  7. asp.net mvc多条件+分页查询解决方案

    开发环境vs2010 css:bootstrap js:jquery bootstrap paginator 原先只是想做个mvc的分页,但是一般的数据展现都需要检索条件,而且是多个条件,所以就变成了 ...

  8. VBA_Excel_教程：单元格颜色

    Sub SetCellColor() '设置单元格颜色 Sheet1.Cells(, ).Interior.ColorIndex = End Sub

  9. EF文章连接

    http://www.cnblogs.com/shanyou/archive/2011/07/17/2108953.html http://www.cnblogs.com/haogj/archive/ ...

  10. PHP左、右、内连接

    left join   :左连接,返回左表中所有的记录以及右表中连接字段相等的记录.right join :右连接,返回右表中所有的记录以及左表中连接字段相等的记录.inner join: 内连接,又 ...