LESS初探

时间:2022-11-04 18:18:50

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%;
}
}
}

LESS初探

参考链接: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&lpar;8&rpar;使用3D纹理渲染体数据 &lpar;Volume Rendering&rpar; 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  3. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  4. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  5. &period;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&sol;Value之王Memcached初探:三、Memcached解决Session的分布式存储场景的应用

    一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...

  9. NoSQL初探之人人都爱Redis:(3)使用Redis作为消息队列服务场景应用案例

    一.消息队列场景简介 “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.消息被发送到队列中,“消息队列”是在消息的传输过程中保存消息的容器 ...

  10. Unity3D游戏开发初探—1&period;跨平台的游戏引擎让&period;NET程序员新生

    一.Unity3D平台简介 Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...

随机推荐

  1. MyBatis源码分析(二)语句处理器

    StatementHandler 语句处理器,主要负责语句的创建.参数的设置.语句的执行.不负责结果集的处理. Statement prepare(Connection connection, Int ...

  2. 【代码笔记】iOS-抽屉效果的实现

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  3. 那些年我们学过的PHP黑魔法

    那些年我们学过的PHP黑魔法 提交 我的评论 加载中 已评论 那些年我们学过的PHP黑魔法 2015-04-10 Sco4x0 红客联盟 红客联盟 红客联盟 微信号 cnhonker_huc 功能介绍 ...

  4. &lbrack;转&rsqb; java书籍&lpar;给Java程序猿们推荐一些值得一看的好书 &plus; 7本免费的Java电子书和教程 &rpar;

    7本免费的Java电子书和教程 1. Thinking in Java (Third Edition) 本书的作者是Bruce Eckel,它一直都是Java最畅销的免费电子书.这本书可以帮助你系统的 ...

  5. mmap DMA【转】

    转自:http://blog.csdn.net/lihaoweiv/article/details/6275241 第 13 章  mmap 和 DMA 本章将深入探讨 Linux 内存管理部分,并强 ...

  6. PHP、C&plus;&plus;的重载

    首先明确一点:PHP重载是用在面向对象的类当中,而不支持函数重载. 这点与C++不一样,在C++当中,重载可以用于面向过程和面向对象,而且方法也不一样. 在C++中,重载适用于当函数名相同时,函数所需 ...

  7. android学习——环境搭建之HelloWorld

    一.在开始Android开发之旅启动之前,首先要搭建环境,然后创建一个简单的HelloWorld.本文的主题如下: 1.1.JDK安装 1.2.Eclipse安装 1.3.Android SDK安装 ...

  8. 拦截QT关闭窗口的CloseEvent

    QDialog类下有一个虚函数 void QDialog::closeEvent (  QCloseEvent   *  e   )  [virtual protected] 通过实现closeEve ...

  9. &period;net 中的DllImport

    只有做成COM的C++ dll才能直接引用.没有做成COM的就只能用P/Invoke(DllImport)或者C++/CLI那种.不过P/Invoke容易类型对不上,所以要是函数多,最好用C++/CL ...

  10. Twenty Newsgroups Classification任务之二seq2sparse(5)

    接上篇blog,继续分析.接下来要调用代码如下: // Should document frequency features be processed if (shouldPrune || proce ...