<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[长青树]]></title>
<link>http://tree360.cn/blog/</link>
<description><![CDATA[十年树木，百年树人。专注Web，关注前端。]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[tree360(lanyi)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>长青树</title>
	<url>http://tree360.cn/blog/images/logos.gif</url>
	<link>http://tree360.cn/blog/</link>
	<description>长青树</description>
</image>

			<item>
			<link>http://tree360.cn/blog/article.asp?id=693</link>
			<title><![CDATA[ Rational Rose Enterprise Edition 2003 下载 破解 注册]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[工具]]></category>
			<pubDate>Tue,15 May 2012 19:30:22 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=693</guid>
		<description><![CDATA[<h1 class="postTitle">	<span class="postTitle2">Rational Rose Enterprise Edition 2003 破解步骤</span></h1><p align="left">	<span style="font-size: 10pt;">&nbsp;&nbsp;&nbsp; </span><br />	&nbsp;&nbsp;&nbsp; 从事开发工作n年以后，有觉得设计模式的重要，uml建模当然是我的首选,所以就安装了Rose 2003.以下是破解过程:<br />	<br />	<span style="font-size: 10pt;">&nbsp;&nbsp; 1.安装Rose后,默认是需要许可证书的..去下载个破解的..我上传了破解文件..<a href="http://files.cnblogs.com/lixianhuei/rose2003crack.rar" target="_blank">点击这里下载Rose 2003破解</a></span><br />	<br />	&nbsp;&nbsp;&nbsp;&nbsp; 2.先用破解压缩包里的rational.exe，lmgrd.exe 覆盖到你的\安装目录的Rartional\commen\下<br />	<br />	&nbsp;&nbsp;&nbsp;&nbsp; 3.然后记事本打开license.dat, 修改里面的SERVER Microsoft ANY DAEMON rational &quot;C:\Program Files\Rational\Common\rational.exe&quot; 修改为</p><p align="left">	SERVER lanyi ANY</p><p align="left">	DAEMON rational &quot;C:\Program Files\Rational\common\rational.exe&quot;<br />	&nbsp;&nbsp;&nbsp;&nbsp; 改成SERVER 你的机器名ANY DAEMON rational &quot;你的安装目录\rational.exe&quot; ,拷贝到Common目录下..<br />	我这里机器猫为lanyi，安装目录为默认c盘C:\Program Files\Rational\common\rational.exe下。<br />	&nbsp;&nbsp;&nbsp;<br />	&nbsp;&nbsp;&nbsp; 4. 将Flexlm.cpl拷贝到C:\windows\system32\下， 在控制面板里运行FlexLm License Manager；这里我们可以cmd 进入控制明白，然后进入cd c:\windows\system32 然后运行Flexlm.cpl<br />	<br />	&nbsp;&nbsp;&nbsp;会出现一个Flexlm License Manager的窗口。<br />	<br />	&nbsp;&nbsp;&nbsp; 运行后, 在Setup 面板配置文件路径，lmgrd.exe -&gt; 你的安装目录\Common\lmgrd.exe, 而License File 为你改过的license.dat ...<br />	<br />	<span style="FONT-SIZE: 10pt"><img align="bottom" height="245" hspace="5" src="http://images.cnblogs.com/cnblogs_com/lixianhuei/2.gif" style="cursor: pointer;" title="在新窗口打开图片" width="477" /></span><br />	<br />	&nbsp;&nbsp;&nbsp;&nbsp; 5.在Control面板点击Start，如果成功的话点击Status按钮将显示 你的机器名：license server UP (MASTER) 说明成功了 ；我这里显示：lanyi：license server UP (MASTER)<br />	&nbsp;&nbsp;&nbsp;&nbsp; 失败的话重启一下FlexLm License Manager就没问题了。&nbsp;或者你到系统的服务里面，找到这个服务，把他启起来。<br />	<br />	<span style="FONT-SIZE: 10pt"><img align="bottom" height="245" hspace="5" src="http://images.cnblogs.com/cnblogs_com/lixianhuei/3.gif" style="cursor: pointer;" title="在新窗口打开图片" width="477" /></span><br />	&nbsp;</p><p align="left">	到这里，我们打开rose，还是会提示我们license 无效问题。<br />	&nbsp;&nbsp;&nbsp;&nbsp; 6.如果弹出对话框License Key Administrator Wizard后, 选定Point to a Rational License Server to get my licenses，单击下一步，<br />	Server Name文本框中填写你的机器号(可能已经填好)，单击完成。(成功的话会出现两屏的licenses)&nbsp;</p><p align="left">	或者我们接下来自己打开</p><p align="left">	开始菜单中找到，打开Rational License Key Administrator打开，点击工具栏中的第一个工具（Start WIzard）, Port ID不填点击下一步，在Server Name中的名字改为自己的计算机名即可。成功的话，Rational License Key Administrator下面会列出已经可用的产品了。</p><p>	<img src="http://farm9.staticflickr.com/8024/7202499124_9e4df1fe29.jpg" /></p>]]></description>
		</item>
		
			<item>
			<link>http://tree360.cn/blog/article.asp?id=692</link>
			<title><![CDATA[Adobe Dreamweaver CS5.5序列号]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[工具]]></category>
			<pubDate>Mon,14 May 2012 15:47:45 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=692</guid>
		<description><![CDATA[对于DW~话不多说，网页开发的必备工具现在的最新版本就是CS5.5！支持CSS3.0以及HTML5的可视化编写！其实就是也差不多用来写代码就行！<br/><br/>启动Adobe Dreamweaver CS5.5前找到windows/system32/drivers/etc，用记事本打开文件&#34;HOSTS&#34;<br/>在下面加入<br/>127.0.0.1 activate.adobe.com<br/>127.0.0.1 practivate.adobe.com<br/>127.0.0.1 ereg.adobe.com<br/>127.0.0.1 activate.wip3.adobe.com<br/>127.0.0.1 wip3.adobe.com<br/>127.0.0.1 3dns-3.adobe.com<br/>127.0.0.1 3dns-2.adobe.com<br/>127.0.0.1 adobe-dns.adobe.com<br/>127.0.0.1 adobe-dns-2.adobe.com<br/>127.0.0.1 adobe-dns-3.adobe.com<br/>127.0.0.1 ereg.wip3.adobe.com<br/>127.0.0.1 activate-sea.adobe.com<br/>127.0.0.1 wwis-dubc1-vip60.adobe.com<br/>127.0.0.1 activate-sjc0.adobe.com<br/>而后用序列号进行安装即可。<br/><br/>3个序列号测试均可以用！<br/><br/>1192-1313-4240-0415-2225-5323<br/><br/>1192-1756-8921-7408-0509-4870<br/><br/>1192-1321-8328-4108-7860-1096]]></description>
		</item>
		
			<item>
			<link>http://tree360.cn/blog/article.asp?id=691</link>
			<title><![CDATA[SQLite数据库查看工具汇]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[工具]]></category>
			<pubDate>Fri,11 May 2012 16:32:08 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=691</guid>
		<description><![CDATA[<p>	SQLite的官方网站<a href="http://www.sqlite.org/" target="_blank">http://www.sqlite.org/</a><br />	<br />	SQLite的官方网址列了很多查看SQLite数据库的软件:<br />	<a href="http://www.sqlite.org/cvstrac/wiki?p=ManagementTools" target="_blank">http://www.sqlite.org/cvstrac/wiki?p=ManagementTools</a><br />	<br />	这里推荐我使用过的几个, 当然是免费的才行.<br />	<br />	1. SQLite Database Browser<br />	<img src="http://sqlitebrowser.sourceforge.net/images/logo.gif" /><br />	<a href="http://sqlitebrowser.sourceforge.net/" target="_blank">http://sqlitebrowser.sourceforge.net/</a><br />	这个是我最早用过的, 写在这里纪念一下, 但不推荐使用.有个好处是支持各种平台, 包括Windows/Linux/Mac OS.<br />	<br />	2. SQLite Administrator<br />	<img class="magplus" height="115" src="http://sqliteadmin.orbmu2k.de/header.jpg" title="点击查看原始大小图片" width="700" /><br />	<a href="http://sqliteadmin.orbmu2k.de/" target="_blank">http://sqliteadmin.orbmu2k.de/</a><br />	很小巧, 推荐使用.<br />	<br />	3. SQLite Expert - Personal Edition<br />	<img class="magplus" height="85" src="http://www.sqliteexpert.com/images/secheader.png" title="点击查看原始大小图片" width="700" /><br />	<a href="http://www.sqliteexpert.com/" target="_blank">http://www.sqliteexpert.com/</a><br />	很好很强大, 推荐使用.</p>]]></description>
		</item>
		
			<item>
			<link>http://tree360.cn/blog/article.asp?id=690</link>
			<title><![CDATA[红薯 为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[Web开发]]></category>
			<pubDate>Sun,01 Apr 2012 12:26:27 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=690</guid>
		<description><![CDATA[<p>	CSS 预处理器技术已经非常的成熟，而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。</p><p>	首先我们来简单介绍下什么是 CSS 预处理器，CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。</p><p>	不要再停留在石器时代了，下面让我们开始 CSS 预处理器之旅。</p><p>	我们将会从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操作符等方面分别对这三个框架进行比较介绍。</p><p>	语法</p><p>	在使用 CSS 预处理器之前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。</p><p>	首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果你可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。</p><p>	下面是这二者的语法：</p><div class="syntaxhighlighter  " id="highlighter_49735">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="comments">/* style.scss or style.less */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code> <code class="plain">{</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	&nbsp;</p><p>	你注意到了，这是一个再普通不过的，不过 Sass 同时也支持老的语法，就是不包含花括号和分号的方式：</p><div class="syntaxhighlighter  " id="highlighter_955192">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="comments">/* style.sass */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982c1</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名，下面是 Stylus 支持的语法：</p><div class="syntaxhighlighter  " id="highlighter_660660">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="comments">/* style.styl */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code> <code class="plain">{</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="comments">/* omit brackets */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="comments">/* omit colons and semi-colons */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">color </code><code class="value">#0982C1</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	你也可以在同一个样式单中使用不同的变量，例如下面的写法也不会报错：</p><div class="syntaxhighlighter  " id="highlighter_17556">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code> <code class="plain">{</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">color </code><code class="value">#0982c1</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="plain">h</code><code class="value">2</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">1.2em</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	<span style="font-weight:bold;">变量</span></p><p>	你可以在 CSS 预处理器中声明变量，并在整个样式单中使用，支持任何类型的变量，例如颜色、数值（不管是否包括单位）、文本。然后你可以任意引用该变量。</p><p>	Sass 的变量必须是 $ 开始，然后变量名和值使用冒号隔开，跟 CSS 的属性一致：</p><div class="syntaxhighlighter  " id="highlighter_540895">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">$mainColor: </code><code class="value">#0982c1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">$siteWidth: </code><code class="value">1024px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="plain">$borderStyle: </code><code class="value">dotted</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: $mainColor;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>7</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="plain">$borderStyle $mainColor;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>8</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">max-width</code><code class="plain">: $siteWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>9</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	而 Less 的变量名使用 @ 符号开始：</p><div class="syntaxhighlighter  " id="highlighter_565056">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">@mainColor: </code><code class="value">#0982c1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">@siteWidth: </code><code class="value">1024px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="plain">@borderStyle: </code><code class="value">dotted</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: @mainColor;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>7</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="plain">@borderStyle @mainColor;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>8</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">max-width</code><code class="plain">: @siteWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>9</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Stylus 对变量名没有任何限定，你可以是 $ 开始，也可以是任意的字符，而且与变量值之间可以用冒号、空格隔开，需要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量，但其对应的值并不会赋予该变量，换句话说，在 Stylus 的变量名不要用 @ 开头。</p><div class="syntaxhighlighter  " id="highlighter_975171">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">mainColor = </code><code class="value">#0982c1</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">siteWidth = </code><code class="value">1024px</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="plain">$borderStyle = </code><code class="value">dotted</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">body</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">color mainColor</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>7</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">border </code><code class="value">1px</code> <code class="plain">$borderStyle mainColor</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>8</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">max-width siteWidth</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	上面的三种不同的 CSS 预处理器的写法，最终都将产生相同的结果：</p><div class="syntaxhighlighter  " id="highlighter_702110">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982c1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">dotted</code> <code class="value">#0982c1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">max-width</code><code class="plain">: </code><code class="value">1024px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	你可以想象，加入你的 CSS 中使用了某个颜色的地方多达数十次，那么要修改颜色时你必须找到这数十次的地方并一一修改，而有了 CSS 预处理器，修改一个地方就够了！</p><p>	嵌套</p><p>	如果我们需要在CSS中相同的 parent 引用多个元素，这将是非常乏味的，你需要一遍又一遍地写 parent。例如：</p><div class="syntaxhighlighter  " id="highlighter_984772">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">section {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">10px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">section nav {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">height</code><code class="plain">: </code><code class="value">25px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">section nav a {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="plain">section nav a:hover {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-decoration</code><code class="plain">: </code><code class="value">underline</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	而如果用 CSS 预处理器，就可以少些很多单词，而且父子节点关系一目了然。我们这里提到的三个 CSS 框架都是允许嵌套语法：</p><div class="syntaxhighlighter  " id="highlighter_426767">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">section {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">10px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">nav {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">height</code><code class="plain">: </code><code class="value">25px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">a {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&amp;:hover {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">text-decoration</code><code class="plain">: </code><code class="value">underline</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>15</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	最终生成的 CSS 结果是：</p><div class="syntaxhighlighter  " id="highlighter_47472">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">section {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">10px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">section nav {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">height</code><code class="plain">: </code><code class="value">25px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">section nav a {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="plain">section nav a:hover {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-decoration</code><code class="plain">: </code><code class="value">underline</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	非常之方便！</p><p>	<span style="font-weight:bold;">Mixins (混入)</span></p><p>	Mixins 有点像是函数或者是宏，当你某段 CSS 经常需要在多个元素中使用时，你可以为这些共用的 CSS 定义一个 Mixin，然后你只需要在需要引用这些 CSS 地方调用该 Mixin 即可。</p><p>	Sass 的混入语法：</p><div class="syntaxhighlighter  " id="highlighter_858963">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="comments">/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="plain">@mixin error($borderWidth: </code><code class="value">2px</code><code class="plain">) {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: $borderWidth </code><code class="value">solid</code> <code class="value">#F00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#F00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">.generic-error {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">4px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">@ include error(); </code><code class="comments">/* Applies styles from mixin error */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="plain">.login-error {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">left</code><code class="plain">: </code><code class="value">12px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">position</code><code class="plain">: </code><code class="value">absolute</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>15</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">top</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>16</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">@ include error(</code><code class="value">5px</code><code class="plain">); </code><code class="comments">/* Applies styles from mixin error with argument $borderWidth equal to 5px*/</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>17</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Less CSS 的混入语法：</p><div class="syntaxhighlighter  " id="highlighter_351160">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="comments">/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="plain">.error(@borderWidth: </code><code class="value">2px</code><code class="plain">) {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: @borderWidth </code><code class="value">solid</code> <code class="value">#F00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#F00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">.generic-error {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">4px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">.error(); </code><code class="comments">/* Applies styles from mixin error */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="plain">.login-error {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">left</code><code class="plain">: </code><code class="value">12px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">position</code><code class="plain">: </code><code class="value">absolute</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>15</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">top</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>16</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">.error(</code><code class="value">5px</code><code class="plain">); </code><code class="comments">/* Applies styles from mixin error with argument @borderWidth equal to 5px */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>17</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Stylus 的混入语法：</p><div class="syntaxhighlighter  " id="highlighter_851431">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="comments">/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="plain">error(borderWidth= </code><code class="value">2px</code><code class="plain">) {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: borderWidth </code><code class="value">solid</code> <code class="value">#F00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#F00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">.generic-error {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">4px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">error(); </code><code class="comments">/* Applies styles from mixin error */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="plain">.login-error {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">left</code><code class="plain">: </code><code class="value">12px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">position</code><code class="plain">: </code><code class="value">absolute</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>15</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">top</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>16</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">error(</code><code class="value">5px</code><code class="plain">); </code><code class="comments">/* Applies styles from mixin error with argument borderWidth equal to 5px */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>17</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	最终它们都将编译成如下的 CSS 样式：</p><div class="syntaxhighlighter  " id="highlighter_675157">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">.generic-error {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">4px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">2px</code> <code class="value">solid</code> <code class="value">#f00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#f00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">.login-error {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">left</code><code class="plain">: </code><code class="value">12px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">position</code><code class="plain">: </code><code class="value">absolute</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">top</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">5px</code> <code class="value">solid</code> <code class="value">#f00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#f00</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	<span style="font-weight:bold;">继承</span></p><p>	当我们需要为多个元素定义相同样式的时候，我们可以考虑使用继承的做法。例如我们经常需要：</p><div class="syntaxhighlighter  " id="highlighter_988456">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">p,</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">ul,</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="plain">ol {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="comments">/* styles here */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	在 Sass 和 Stylus 我们可以这样写：</p><div class="syntaxhighlighter  " id="highlighter_220769">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">.</code><code class="value">block</code> <code class="plain">{</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">10px</code> <code class="value">5px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">2px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="plain">p {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">@extend .</code><code class="value">block</code><code class="plain">; </code><code class="comments">/* Inherit styles from '.block' */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code> <code class="value">#EEE</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="plain">ul, ol {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">@extend .</code><code class="value">block</code><code class="plain">; </code><code class="comments">/* Inherit styles from '.block' */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#333</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-transform</code><code class="plain">: </code><code class="value">uppercase</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	在这里首先定义 .block 块，然后让 p 、ul 和 ol 元素继承 .block ，最终生成的 CSS 如下：</p><div class="syntaxhighlighter  " id="highlighter_379431">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">.</code><code class="value">block</code><code class="plain">, p, ul, ol {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">10px</code> <code class="value">5px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">2px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">p {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code> <code class="value">#EEE</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="plain">ul, ol {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#333</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-transform</code><code class="plain">: </code><code class="value">uppercase</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	在这方面 Less 表现的稍微弱一些，更像是混入写法：</p><div class="syntaxhighlighter  " id="highlighter_423606">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">.</code><code class="value">block</code> <code class="plain">{</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">10px</code> <code class="value">5px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">2px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="plain">p {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">.</code><code class="value">block</code><code class="plain">; </code><code class="comments">/* Inherit styles from '.block' */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code> <code class="value">#EEE</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="plain">ul, ol {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">.</code><code class="value">block</code><code class="plain">; </code><code class="comments">/* Inherit styles from '.block' */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#333</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-transform</code><code class="plain">: </code><code class="value">uppercase</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	生成的 CSS 如下：</p><div class="syntaxhighlighter  " id="highlighter_475424">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">.</code><code class="value">block</code> <code class="plain">{</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">10px</code> <code class="value">5px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">2px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">p {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">10px</code> <code class="value">5px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">2px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code> <code class="value">#EEE</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="plain">ul,</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="plain">ol {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">10px</code> <code class="value">5px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">padding</code><code class="plain">: </code><code class="value">2px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#333</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>15</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-transform</code><code class="plain">: </code><code class="value">uppercase</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>16</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	你所看到的上面的代码中，.block 的样式将会被插入到相应的你想要继承的选择器中，但需要注意的是优先级的问题。</p><p>	导入 (Import)</p><p>	很多 CSS 开发者对导入的做法都不太感冒，因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同，它只是在语义上包含了不同的文件，但最终结果是一个单一的 CSS 文件，如果你是通过 <code>@ import &quot;file.css&quot;;</code> 导入 CSS 文件，那效果跟普通的 CSS 导入一样。注意：导入文件中定义的混入、变量等信息也将会被引入到主样式文件中，因此需要避免它们互相冲突。</p><p>	reset.css:</p><div class="syntaxhighlighter  " id="highlighter_444416">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="comments">/* file.{type} */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">background</code><code class="plain">: </code><code class="value">#EEE</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	main.xxx:</p><div class="syntaxhighlighter  " id="highlighter_199029">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">@ import </code><code class="string">&quot;reset.css&quot;</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">@ import </code><code class="string">&quot;file.{type}&quot;</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="plain">p {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">background</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	最终生成的 CSS：</p><div class="syntaxhighlighter  " id="highlighter_387873">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">@ import </code><code class="string">&quot;reset.css&quot;</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">background</code><code class="plain">: </code><code class="value">#EEE</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">p {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">background</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>7</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	<span style="font-weight:bold;">颜色函数</span></p><p>	CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。</p><p>	Sass：</p><div class="syntaxhighlighter  " id="highlighter_692491">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">lighten($color, </code><code class="value">10%</code><code class="plain">); </code><code class="comments">/* returns a color 10% lighter than $color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="plain">darken($color, </code><code class="value">10%</code><code class="plain">);&nbsp; </code><code class="comments">/* returns a color 10% darker than $color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">saturate($color, </code><code class="value">10%</code><code class="plain">);&nbsp;&nbsp; </code><code class="comments">/* returns a color 10% more saturated than $color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">desaturate($color, </code><code class="value">10%</code><code class="plain">); </code><code class="comments">/* returns a color 10% less saturated than $color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">grayscale($color);&nbsp; </code><code class="comments">/* returns grayscale of $color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="plain">complement($color); </code><code class="comments">/* returns complement color of $color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="value">invert</code><code class="plain">($color);&nbsp;&nbsp;&nbsp;&nbsp; </code><code class="comments">/* returns inverted color of $color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="value">mix</code><code class="plain">($color</code><code class="value">1</code><code class="plain">, $color</code><code class="value">2</code><code class="plain">, </code><code class="value">50%</code><code class="plain">); </code><code class="comments">/* mix $color1 with $color2 with a weight of 50% */</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	&nbsp;</p><p>	上面只是简单列了 Sass 的一些基本颜色处理函数，完整的列表请看 <a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html" rel="nofollow">Sass Documentation</a>.</p><p>	下面是一个具体的例子：</p><div class="syntaxhighlighter  " id="highlighter_591041">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">$</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code> <code class="plain">{</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">background</code><code class="plain">: $color;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">3px</code> <code class="value">solid</code> <code class="plain">darken($color, </code><code class="value">50%</code><code class="plain">);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Less CSS:</p><div class="syntaxhighlighter  " id="highlighter_809108">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">lighten(@color, </code><code class="value">10%</code><code class="plain">); </code><code class="comments">/* returns a color 10% lighter than @color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="plain">darken(@color, </code><code class="value">10%</code><code class="plain">);&nbsp; </code><code class="comments">/* returns a color 10% darker than @color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">saturate(@color, </code><code class="value">10%</code><code class="plain">);&nbsp;&nbsp; </code><code class="comments">/* returns a color 10% more saturated than @color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">desaturate(@color, </code><code class="value">10%</code><code class="plain">); </code><code class="comments">/* returns a color 10% less saturated than @color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="plain">spin(@color, </code><code class="value">10</code><code class="plain">);&nbsp; </code><code class="comments">/* returns a color with a 10 degree larger in hue than @color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="plain">spin(@color, </code><code class="value">-10</code><code class="plain">); </code><code class="comments">/* returns a color with a 10 degree smaller hue than @color */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="value">mix</code><code class="plain">(@color</code><code class="value">1</code><code class="plain">, @color</code><code class="value">2</code><code class="plain">); </code><code class="comments">/* return a mix of @color1 and @color2 */</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	&nbsp;</p><p>	LESS 完整的颜色函数列表请看 <a href="http://lesscss.org/#-color-functions" rel="nofollow">LESS Documentation</a>.</p><p>	LESS 使用颜色函数的例子：</p><div class="syntaxhighlighter  " id="highlighter_571540">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">@</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982C1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code> <code class="plain">{</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">background</code><code class="plain">: @color;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">border</code><code class="plain">: </code><code class="value">3px</code> <code class="value">solid</code> <code class="plain">darken(@color, </code><code class="value">50%</code><code class="plain">);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Stylus:</p><div class="syntaxhighlighter  " id="highlighter_341273">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">lighten(color, </code><code class="value">10%</code><code class="plain">); </code><code class="comments">/* returns a color 10% lighter than 'color' */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="plain">darken(color, </code><code class="value">10%</code><code class="plain">);&nbsp; </code><code class="comments">/* returns a color 10% darker than 'color' */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="plain">saturate(color, </code><code class="value">10%</code><code class="plain">);&nbsp;&nbsp; </code><code class="comments">/* returns a color 10% more saturated than 'color' */</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">desaturate(color, </code><code class="value">10%</code><code class="plain">); </code><code class="comments">/* returns a color 10% less saturated than 'color' */</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	&nbsp;</p><p>	完整的颜色函数列表请阅读 <a href="http://learnboost.github.com/stylus/docs/bifs.html" rel="nofollow">Stylus Documentation</a>.</p><p>	实例：</p><div class="syntaxhighlighter  " id="highlighter_462188">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">color = </code><code class="value">#0982C1</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">background color</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">border </code><code class="value">3px</code> <code class="value">solid</code> <code class="plain">darken(color, </code><code class="value">50%</code><code class="plain">)</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	<span style="font-weight:bold;">运算符</span></p><p>	你可以直接在 CSS 预处理器中进行样式的计算，例如：</p><div class="syntaxhighlighter  " id="highlighter_779090">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: (</code><code class="value">14px</code><code class="plain">/</code><code class="value">2</code><code class="plain">);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">top</code><code class="plain">: </code><code class="value">50px</code> <code class="plain">+ </code><code class="value">100px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">right</code><code class="plain">: </code><code class="value">100px</code> <code class="plain">- </code><code class="value">50px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">left</code><code class="plain">: </code><code class="value">10</code> <code class="plain">* </code><code class="value">10</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	<span style="font-weight:bold;">一些跟具体浏览器相关的处理</span></p><p>	这是宣传使用预处理的原因之一，并且是一个很好的理由，这样可以节省的大量的时间和汗水。创建一个mixin来处理不同浏览器的CSS写法是很简单的，节省了大量的重复工作和痛苦的代码编辑。</p><p>	Sass</p><div class="syntaxhighlighter  " id="highlighter_281751">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">@mixin border-radius($values) {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">-webkit-border-radius: $values;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">-moz-border-radius: $values;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">border-radius: $values;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>7</code></td>						<td class="content">							<code class="plain">div {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>8</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">@ include border-radius(</code><code class="value">10px</code><code class="plain">);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>9</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Less CSS</p><div class="syntaxhighlighter  " id="highlighter_900689">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">.border-radius(@values) {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">-webkit-border-radius: @values;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">-moz-border-radius: @values;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">border-radius: @values;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>7</code></td>						<td class="content">							<code class="plain">div {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>8</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">.border-radius(</code><code class="value">10px</code><code class="plain">);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>9</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Stylus</p><div class="syntaxhighlighter  " id="highlighter_14016">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">border-radius(values) {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">-webkit-border-radius: values;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">-moz-border-radius: values;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">border-radius: values;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>7</code></td>						<td class="content">							<code class="plain">div {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>8</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">border-radius(</code><code class="value">10px</code><code class="plain">);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>9</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	编译结果：</p><div class="syntaxhighlighter  " id="highlighter_624163">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">div {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">-webkit-border-radius: </code><code class="value">10px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">-moz-border-radius: </code><code class="value">10px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">border-radius: </code><code class="value">10px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	<span style="font-weight:bold;">3D文本</span></p><p>	要生成具有 3D 效果的文本可以使用 <code>text-shadows</code> ，唯一的问题就是当要修改颜色的时候就非常的麻烦，而通过 mixin 和颜色函数可以很轻松的实现：</p><p>	Sass</p><div class="syntaxhighlighter  " id="highlighter_768718">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">@mixin text</code><code class="value">3</code><code class="plain">d($color) {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: $color;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-shadow</code><code class="plain">: </code><code class="value">1px</code> <code class="value">1px</code> <code class="value">0px</code> <code class="plain">darken($color, </code><code class="value">5%</code><code class="plain">),</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">2px</code> <code class="value">2px</code> <code class="value">0px</code> <code class="plain">darken($color, </code><code class="value">10%</code><code class="plain">),</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">3px</code> <code class="value">3px</code> <code class="value">0px</code> <code class="plain">darken($color, </code><code class="value">15%</code><code class="plain">),</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">4px</code> <code class="value">4px</code> <code class="value">0px</code> <code class="plain">darken($color, </code><code class="value">20%</code><code class="plain">),</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">4px</code> <code class="value">4px</code> <code class="value">2px</code> <code class="value">#000</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="plain">h</code><code class="value">1</code> <code class="plain">{</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">32pt</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">@ include text</code><code class="value">3</code><code class="plain">d(</code><code class="value">#0982c1</code><code class="plain">);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Less CSS</p><div class="syntaxhighlighter  " id="highlighter_607196">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">.text</code><code class="value">3</code><code class="plain">d(@color) {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: @color;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-shadow</code><code class="plain">: </code><code class="value">1px</code> <code class="value">1px</code> <code class="value">0px</code> <code class="plain">darken(@color, </code><code class="value">5%</code><code class="plain">),</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">2px</code> <code class="value">2px</code> <code class="value">0px</code> <code class="plain">darken(@color, </code><code class="value">10%</code><code class="plain">),</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">3px</code> <code class="value">3px</code> <code class="value">0px</code> <code class="plain">darken(@color, </code><code class="value">15%</code><code class="plain">),</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">4px</code> <code class="value">4px</code> <code class="value">0px</code> <code class="plain">darken(@color, </code><code class="value">20%</code><code class="plain">),</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">4px</code> <code class="value">4px</code> <code class="value">2px</code> <code class="value">#000</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="plain">span {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">32pt</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">.text</code><code class="value">3</code><code class="plain">d(</code><code class="value">#0982c1</code><code class="plain">);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Stylus</p><div class="syntaxhighlighter  " id="highlighter_872701">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">text</code><code class="value">3</code><code class="plain">d(color)</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: color</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-shadow</code><code class="plain">: </code><code class="value">1px</code> <code class="value">1px</code> <code class="value">0px</code> <code class="plain">darken(color, </code><code class="value">5%</code><code class="plain">), </code><code class="value">2px</code> <code class="value">2px</code> <code class="value">0px</code> <code class="plain">darken(color, </code><code class="value">10%</code><code class="plain">), </code><code class="value">3px</code> <code class="value">3px</code> <code class="value">0px</code> <code class="plain">darken(color, </code><code class="value">15%</code><code class="plain">), </code><code class="value">4px</code> <code class="value">4px</code> <code class="value">0px</code> <code class="plain">darken(color, </code><code class="value">20%</code><code class="plain">), </code><code class="value">4px</code> <code class="value">4px</code> <code class="value">2px</code> <code class="value">#000</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="plain">span</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">32pt</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="plain">text</code><code class="value">3</code><code class="plain">d(</code><code class="value">#0982c1</code><code class="plain">)</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	生成的 CSS</p><div class="syntaxhighlighter  " id="highlighter_10163">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>1</code></td>						<td class="content">							<code class="plain">span {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>2</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">32pt</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>3</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">color</code><code class="plain">: </code><code class="value">#0982c1</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>4</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">text-shadow</code><code class="plain">: </code><code class="value">1px</code> <code class="value">1px</code> <code class="value">0px</code> <code class="value">#097bb7</code><code class="plain">,</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>5</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">2px</code> <code class="value">2px</code> <code class="value">0px</code> <code class="value">#0875ae</code><code class="plain">,</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>6</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">3px</code> <code class="value">3px</code> <code class="value">0px</code> <code class="value">#086fa4</code><code class="plain">,</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>7</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">4px</code> <code class="value">4px</code> <code class="value">0px</code> <code class="value">#07689a</code><code class="plain">,</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>8</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="value">4px</code> <code class="value">4px</code> <code class="value">2px</code> <code class="value">#000</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>9</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	效果图：</p><p>	<a href="http://static.oschina.net/uploads/img/201203/13222932_fIcm.png" target="_blank"><img src="http://static.oschina.net/uploads/img/201203/13222932_fIcm.png" style="cursor: pointer;" /></a></p><p>	列 (Columns)</p><p>	使用数值操作和变量可以很方便的实现适应屏幕大小的布局处理。</p><p>	Sass</p><div class="syntaxhighlighter  " id="highlighter_448367">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">$siteWidth: </code><code class="value">1024px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="plain">$gutterWidth: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="plain">$sidebarWidth: </code><code class="value">300px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code> <code class="value">auto</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: $siteWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="plain">.content {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: $siteWidth - ($sidebarWidth+$gutterWidth);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="plain">.sidebar {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>15</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin-left</code><code class="plain">: $gutterWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>16</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: $sidebarWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>17</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Less CSS</p><div class="syntaxhighlighter  " id="highlighter_478702">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">@siteWidth: </code><code class="value">1024px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="plain">@gutterWidth: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="plain">@sidebarWidth: </code><code class="value">300px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code> <code class="value">auto</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: @siteWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="plain">.content {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: @siteWidth - (@sidebarWidth+@gutterWidth);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="plain">.sidebar {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>15</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin-left</code><code class="plain">: @gutterWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>16</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: @sidebarWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>17</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	Stylus</p><div class="syntaxhighlighter  " id="highlighter_254987">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">siteWidth = </code><code class="value">1024px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="plain">gutterWidth = </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="plain">sidebarWidth = </code><code class="value">300px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="spaces">&nbsp;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code> <code class="value">auto</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: siteWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="plain">.content {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: siteWidth - (sidebarWidth+gutterWidth);</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="plain">.sidebar {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>14</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>15</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin-left</code><code class="plain">: gutterWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>16</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: sidebarWidth;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>17</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	实际效果</p><div class="syntaxhighlighter  " id="highlighter_730072">	<div class="lines">		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>01</code></td>						<td class="content">							<code class="plain">body {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>02</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code> <code class="value">auto</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>03</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: </code><code class="value">1024px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>04</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>05</code></td>						<td class="content">							<code class="plain">.content {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>06</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>07</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: </code><code class="value">704px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>08</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>09</code></td>						<td class="content">							<code class="plain">.sidebar {</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>10</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>11</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">margin-left</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt2">			<table>				<tbody>					<tr>						<td class="number">							<code>12</code></td>						<td class="content">							<code class="spaces">&nbsp;&nbsp;</code><code class="keyword">width</code><code class="plain">: </code><code class="value">300px</code><code class="plain">;</code></td>					</tr>				</tbody>			</table>		</div>		<div class="line alt1">			<table>				<tbody>					<tr>						<td class="number">							<code>13</code></td>						<td class="content">							<code class="plain">}</code></td>					</tr>				</tbody>			</table>		</div>	</div></div><p>	<span style="font-weight:bold;">错误报告</span></p><p>	如果你经常 CSS 你会发现很难找到 CSS 中错误的地方，这也是预处理框架的好处，它会报告错误，你可以从这<span style="text-decoration:underline;">篇</span><a href="http://tjholowaychuk.com/post/5002088731/stylus-vs-sass-vs-less-error-reporting" rel="nofollow" target="_blank">文章</a>中学习如何让 CSS 框架错误报告。</p><p>	注释</p><p>	以上三种框架都支持形如 /* */ 的多行注释以及 // 的单行注释。</p><p>	<a href="http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/" rel="nofollow" target="_blank">英文原文</a>，OSCHINA 原创翻译</p><p>	出自：http://www.oschina.net/question/12_44255</p><p>	&nbsp;</p><p>	&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://tree360.cn/blog/article.asp?id=689</link>
			<title><![CDATA[从无阻塞并行脚本加载(Lab.js)到浏览器消息模型]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[Web开发]]></category>
			<pubDate>Sun,01 Apr 2012 12:20:42 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=689</guid>
		<description><![CDATA[<div height="348" id="svPlayer" width="425">	<embed allowfullscreen="true" allowscriptaccess="always" flashvars="iframe_host=http://kongji.wordpress.com/tag/lab-js/&totalSlides=66&stitle=labjs-8410244&doc=lab-js-110624035836-phpapp01&show_branding=1&version_no=1308906010&hostedIn=iframe&presentationId=8410244&userName=JacksonTian&fullscreen_bg_color=White" height="414" id="__sse8410244" name="__sse8410244" quality="high" src="http://static.slidesharecdn.com/swf/ssplayer2.swf" style="" type="application/x-shockwave-flash" width="414" wmode="transparent"></embed></div>]]></description>
		</item>
		
			<item>
			<link>http://tree360.cn/blog/article.asp?id=688</link>
			<title><![CDATA[多个ISO合并到一张光盘,并可启动]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[工具]]></category>
			<pubDate>Wed,28 Mar 2012 20:53:16 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=688</guid>
		<description><![CDATA[<br/><a href="http://www.360doc.com/content/12/0328/20/8550264_198724123.shtml" target="_blank" rel="external">http://www.360doc.com/content/12/0328/20/8550264_198724123.shtml</a>]]></description>
		</item>
		
			<item>
			<link>http://tree360.cn/blog/article.asp?id=687</link>
			<title><![CDATA[电脑蓝屏故障的原因和解决办法]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[工具]]></category>
			<pubDate>Wed,28 Mar 2012 20:47:58 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=687</guid>
		<description><![CDATA[这里列举几个典型的蓝屏故障的原因和解决办法。<br/>一、0X0000000A<br/>&nbsp;&nbsp;&nbsp;&nbsp;这个蓝屏代码和硬件无关，是驱动和软件有冲突造成的，最早发现这个代码是因为公司的DELL机器的USB键盘和QQ2007的键盘加密程序有冲突发现的这个问题。也在IBM T系列笔记本上装驱动失误产生过。<br/>&nbsp;&nbsp;&nbsp;&nbsp;如果您的机器蓝屏了，而且每次都是这个代码请想一想最近是不是更新了什么软件或者什么驱动了，把它卸载再看一下。一般情况下就能够解决，如果实在想不起来，又非常频繁的话，那么没办法，重新做系统吧。<br/>二、0X0000007B<br/>&nbsp;&nbsp;&nbsp;&nbsp;这个代码和硬盘有关系，不过不用害怕，不是有坏道了，是设置问题或者病毒造成的硬盘引导分区错误。<br/>&nbsp;&nbsp;&nbsp;&nbsp;如果您在用原版系统盘安装系统的时候出这个问题，那说明您的机器配置还是比较新的，作为老的系统盘，不认这么新的硬盘接口，所以得进BIOS把硬盘模式改成IDE兼容模式。当然了，现在人们都用ghost版的操作系统，比较新的ghost盘是不存在这个问题的。关于人们找不到IDE这项的问题，因为很多主板标明这项的措辞不太一样 有些写着AHCI和Compatibility，这个AHCI就等于是SATA模式，Compatibility相当于IDE模式。<br/>&nbsp;&nbsp;&nbsp;&nbsp;如果您的操作系统使用了一段时间了，突然有一天出现这个问题了，那么对不起，病毒造成的，开机按F8，选择最后一次正确的配置，恢复不到正常模式的话那么请重新做系统吧。<br/>三、0X000000ED<br/>&nbsp;&nbsp;&nbsp;&nbsp;这个故障和硬盘有关系，系统概率比较大，硬盘真坏的概率比较小。我弄过不下二十个这个代码的蓝屏机器了，其中只有一个是硬盘真的有坏道了。剩下的都是卷出了问题，修复即可，这也是为数不多的可以修复的蓝屏代码之一。<br/>&nbsp;&nbsp;&nbsp;&nbsp;修复方法是找原版的系统安装盘（或者金手指V6那个pe启动界面里就带控制台修复）。这里说用系统盘的方法，把系统盘放入光驱，启动到安装界面，选择按R进入控制台修复，进入控制台后会出现提示符C:\ 大家在这里输入 chkdsk -r 然后它就会自动检测并修复问题了，修复完成之后重新启动计算机就可以进入系统了，进入系统之后最好先杀毒，然后再重新启动一下试一下，如果正常了那就没问题了，如果还出这个代码，那就说明硬盘有问题了，需要更换，或者把有问题的地方单独分区，做成隐藏分区，用后面的空间来装系统。<br/>四、0X0000007E、0X0000008E<br/>&nbsp;&nbsp;&nbsp;&nbsp;这俩代码多是病毒造成的，杀毒即可。正常模式进不去可以开机按F8进安全模式。当然也有可能是内存造成的，可以尝试重新插拔内存，一般这代码内存损坏概率不大。<br/>五、0X00000050<br/>&nbsp;&nbsp;&nbsp;&nbsp;硬件故障，硬盘的可能性很大。如果出现50重启之后还伴随着出现0A、7E、8E这样的代码，那十有八九就是内存坏了。如果每次都出这一个代码，首先换一块硬盘试一下机器能不能正常启动，如果测试硬盘没问题，再试内存，内存也试过的话，换CPU，总之这必是硬件故障。<br/>六、0X000000D1<br/>&nbsp;&nbsp;&nbsp;&nbsp;这个代码一般和显卡有关，有可能是显卡损坏，也可能是只是因为安装了不太兼容的显卡驱动造成的，建议有花屏现象的先找朋友借个显卡插上试一下，或者主机有集成显卡的，用集成显卡试一下。如果平时没有花屏现象，那就更换买机器的时候自带的显卡驱动试一下。<br/>七、coooo21a<br/>&nbsp;&nbsp;&nbsp;&nbsp;C开头的故障，它报的错很邪乎，报未知硬件故障，不过出这类C开头的代码多半与硬件无关。基本是与系统同时启动的一些驱动！或者服务的问题，举一个例子，一次我给一个笔记本的F盘改成了E盘，结果再启动就出这类C开头的代码，最后发现插上一个U盘就能正常启动，因为插上U盘系统里就有F盘了，然后我发现了隐藏的文件，是开机的时候系统写入的。我拔掉这个U盘这问题就又出现，后来把E盘改回F问题就没有了，想来是什么和系统一起启动的软件留在F盘一些文件，没有了它就会自己建，但是连F盘都没有了，也就只能报错了，所以看到这类蓝屏可以照比。<br/>八、每次蓝屏的代码都不一样<br/>&nbsp;&nbsp;&nbsp;&nbsp;这样的问题，基本上是硬件造成的，尤其以内存为第一个需要怀疑的对象，更换内存尝试，第二可能性是CPU虽然这东西不爱坏，可是从2006到现在我也遇到俩了，其他硬件基本上不会造成蓝屏代码随便变的情况。<br/>九、偶尔蓝屏，而且代码一闪而过重新启动的问题<br/>&nbsp;&nbsp;&nbsp;&nbsp;这个是有有两种可能<br/>&nbsp;&nbsp;&nbsp;&nbsp;1、以XP为例，在我的电脑上点击鼠标右键选择属性，找到高级选项卡，找到下面的启动和故障修复项，点击设置。再弹出的窗口里找到中间‘系统失败’处有三个选项，第三项自动重新启动，把这项的勾选取消掉，以后再出问题蓝屏就会停住了。<br/>&nbsp;&nbsp; 2、已经做过上面的设置，但是还是会一闪而过重新启动的，那就是显卡或者CPU过热造成的，打开机箱查看散热风扇和散热器的状态吧。<br/>&nbsp;&nbsp;&nbsp;&nbsp;另外开机就蓝屏看不见代码一闪而过然后自己重新启动的情况。这个时候已经不可能在系统里进行第一步的设置了，那么就要在机器启动的时候按F8，选择启动失败后禁用重新启动这项，选择之后启动失败了，系统就会停在蓝屏代码那里了，这样大家就可以照着蓝屏代码来查看问题了。<br/>十、其他蓝屏代码<br/>&nbsp;&nbsp;&nbsp;&nbsp;参考第七项，一般首先做系统确认是不是系统的问题，然后以以下顺序测试硬件，首先是内存可能性最大，然后是CPU，之后是硬盘，最后是显卡，主板基本不会蓝屏。]]></description>
		</item>
		
			<item>
			<link>http://tree360.cn/blog/article.asp?id=686</link>
			<title><![CDATA[常用API文档合集]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[工具]]></category>
			<pubDate>Mon,26 Mar 2012 09:53:44 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=686</guid>
		<description><![CDATA[<table align="left" border="0" >	<tbody>		<tr>			<td>				<a href="http://www.oschina.net/home/apidoc?api=jquery" style="color: #990099;">jQuery 1.2</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=javase-6-doc-api-zh_CN" style="color: #0000cc;">JDK 1.6 中文版</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=android" style="color: #00cc00;">Android文档</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=j2ee_5.0.03" style="color: #cc0000;">J2EE 5.0</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=midp" style="color: #333333;">MIDP 2.0</a></td>			<td>				<a href="http://java.sun.com/javame/reference/apis/jsr139/" style="color: #ff00cc;">CLDC 1.1</a></td>					</tr>		<tr>		<td>				<a href="http://www.oschina.net/home/apidoc?api=spring-framework-2.5.5" style="color: #cc0000;">Spring 2.5</a></td>			<td>				<a href="http://static.springsource.org/spring/docs/3.0.x/javadoc-api/" style="color: #333333;">Spring 3.x</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=lucene-2.4.0" style="color: #ff00cc;">Lucene 2.4</a></td>			<td>				<a href="http://lucene.apache.org/java/3_0_2/api/all/index.html" style="color: #ff3300;">Lucnee 3.0.2</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=struts-1.3.9" style="color: #ff3300;">Struts 1.x</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=struts-2.1.2" style="color: #990099;">Struts 2.x</a></td>		</tr>		<tr>						<td>				<a href="http://www.oschina.net/home/apidoc?api=ibatis-2.3.4" style="color: #990099;">iBatis 2.3.x</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=velocity-1.5" style="color: #0000cc;">Velocity 1.5</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-lang-2.4" style="color: #00cc00;">Commons-Lang</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-beanutils-1.8.0" style="color: #cc0000;">Commons-Beanutils</a></td>				<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-digester-1.8" style="color: #ff3300;">Commons-Digester</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-email-1.1" style="color: #990099;">Commons-Email</a></td>		</tr>		<tr>						<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-fileupload-1.2.1" style="color: #0000cc;">Commons-Fileupload</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-logging-1.1.1" style="color: #00cc00;">Commons-Logging</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-net-1.4.1" style="color: #cc0000;">Commons-Net</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-vfs-1.0" style="color: #333333;">Commons-Vfs</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-io-1.4" style="color: #ff00cc;">Commons-IO</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-httpclient-3.1" style="color: #ff3300;">HttpClient 3.x</a></td>		</tr>		<tr>			<td>				<a href="http://www.oschina.net/home/apidoc?api=commons-pool-1.4" style="color: #00cc00;">Commons-Pool</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=poi-3.1-FINAL" style="color: #cc0000;">Apache POI</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=ehcache-1.5.0" style="color: #333333;">EhCache</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=c3p0-0.9.1.2" style="color: #ff00cc;">C3P0连接池</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=dom4j-1.6.1" style="color: #ff3300;">dom4j</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=htmlparser1_6" style="color: #990099;">HtmlParser</a></td>					</tr>		<tr><td>				<a href="http://www.oschina.net/home/apidoc?api=mina-2.0.0-M3" style="color: #0000cc;">MINA 2.0</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=jfreechart-1.0.10" style="color: #00cc00;">jFreeChart</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=tapestry-4.1.5" style="color: #ff00cc;">Tapestry 4.1.5</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=turbine-2.3.2" style="color: #ff3300;">Turbine 2.3.2</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=mysql-5.1-zh" style="color: #990099;">MySQL中文文档</a></td>			<td>				<a href="http://www.w3schools.com/Css/default.asp" style="color: #0000cc;">CSS教程</a></td>					</tr>		<tr>		<td>				<a href="http://www.oschina.net/home/apidoc?api=flex-doc-3.2" style="color: #00cc00;">Flex文档</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=hibernate-3.2" style="color: #0000cc;">Hibernate 3.2</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=hibernate-core-3.3.1.GA" style="color: #00cc00;">Hibernate 3.3.1GA</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=axis2-1.4.1" style="color: #333333;">Axis2</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=hibernate-3.2" style="color: #0000cc;">Hibernate 3.2</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=hibernate-core-3.3.1.GA" style="color: #00cc00;">Hibernate 3.3.1GA</a></td>					</tr>		<tr>		<td>				<a href="http://www.oschina.net/home/apidoc?api=httpcomponents-client-4.0.3" style="color: #990099;">HttpClient 4.x</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=httpcomponents-core-4.1" style="color: #0000cc;">HttpCore 4.x</a></td>			<td>				<a href="http://www.oschina.net/home/apidoc?api=slf4j-1.5.3" style="color: #cc0000;">SLF4J</a></td>		</tr>	</tbody></table>]]></description>
		</item>
		
			<item>
			<link>http://tree360.cn/blog/article.asp?id=685</link>
			<title><![CDATA[Eclipse Android 解决代码自动提示功能  ]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[Web开发]]></category>
			<pubDate>Mon,26 Mar 2012 09:04:03 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=685</guid>
		<description><![CDATA[<div class="bct fc05 fc11 nbw-blog ztag js-fs2">	<p style="margin-top: 0px; margin-bottom: 8px; text-indent: 2em;">		<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma; line-height: 25px;">Eclipse for android 实现代码自动提示智能提示功能，介绍 Eclipse for android 编辑器中实现两种主要文件 java 与 xml 代码自动提示功能，解决 eclipse 代码提示失效、eclipse 不能自动提示、eclipse 没有代码提示的问题。eclipse xml 自动提示，eclipse&nbsp;java 自动提示，eclipse 自动提示功能，eclipse 智能提示，eclipse 代码提示功能，eclipse 设置代码提示，eclipse code auto-prompt function ，eclipse android 代码提示。</span></p>	<p style="margin-top: 0px; margin-bottom: 8px; text-indent: 2em;">		<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma; line-height: 25px;">Eclipse for android 设置代码提示功能</span></p>	<br />	<p style="margin-top: 0px; margin-bottom: 8px; text-indent: 2em;">		<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma; line-height: 25px;">1、设置 java 文件的代码提示功能</span></p>	<p style="margin-top: 0px; margin-bottom: 8px; text-indent: 2em;">		<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma; line-height: 25px;"><img alt="设置 java 文件的代码提示功能" border="0" src="http://www.desteps.com/uploads/allimg/110719/1_110719003005_1.jpg" style="padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204);" /></span></p>	<p style="margin-top: 0px; margin-bottom: 8px; text-indent: 2em;">		<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma; line-height: 25px;">打 开 Eclipse 依次选择 Window &gt; Preferences &gt; Java &gt; Editor - Content Assist &gt; Auto activation triggers for Java ，设置框中默认是一个点，</span></p>	<p style="margin-top: 0px; margin-bottom: 8px; text-indent: 2em;">		<span style="color: rgb(51, 51, 51); font-family: Verdana,Arial,Tahoma; line-height: 25px;">现在将它改为： </span>.abcdefghijklmnopqrstuvwxyz(,</p>	<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma; line-height: 25px;">2、设置 xml 文件的代码提示功能</span>	<p style="margin-top: 0px; margin-bottom: 8px; text-indent: 2em;">		<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma; line-height: 25px;"><img alt="设置 xml 文件的代码提示功能" border="0" src="http://www.desteps.com/uploads/allimg/110719/1_110719003005_2.jpg" style="padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204);" /></span></p>	<p style="margin-top: 0px; margin-bottom: 8px; text-indent: 2em;">		<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma; line-height: 25px;">打 开 Eclipse 依次选择 Window &gt; Preferences &gt;&nbsp;Xml &gt; Editor&nbsp;&gt; Content Assist &gt; Auto activation&nbsp;&gt;&nbsp;Prompt when these characters are inserted&nbsp;，设置框中默认是 &lt;=: ，</span></p>	<p style="margin-top: 0px; margin-bottom: 8px; text-indent: 2em;">		<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma; line-height: 25px;">现在将它改为：</span>&nbsp; &lt;=:.abcdefghijklmnopqrstuvwxyz(,</p>	<p>		&nbsp;</p>	<p>		<img alt="" src="http://dl.iteye.com/upload/attachment/0054/6045/56f9ae3e-8759-3b1c-ace8-5acde1875bf1.bmp" style="width: 644px; height: 613px;" /></p>	<p>		注意：</p>	<p>		可能是你打开XML文件的方式不对，如何使直接双击然后选择XML视图，选择open with-xml editor。 使用open with-android layout Editor；就可以了</p></div>]]></description>
		</item>
		
			<item>
			<link>http://tree360.cn/blog/article.asp?id=684</link>
			<title><![CDATA[conversion to dalvik format failed with error ]]></title>
			<author>tree360(lanyi)</author>
			<category><![CDATA[Web开发]]></category>
			<pubDate>Fri,23 Mar 2012 15:56:57 +0800</pubDate>
			<guid>http://tree360.cn/blog/default.asp?id=684</guid>
		<description><![CDATA[android低版本工程（如1.5）放到高版本环境中（如2.2）可能会上述错误，解决方法如下：<br/>1。 如果不修改android sdk版本，则使用project clean 命令作用于某工程即可。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; （该处理方式只是在高版本中兼容了低版本工程，未真正意义上的升级）<br/>2。 如果修改android sdk版本，则需要以下几个步骤：<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1）修改SDK<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 选择工程，build path --&gt; configure build path ---&gt; library 删除引用的低版本SDK，<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 然后add External JARs,选择高版本SDK,OK,保存<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2）修改classpath文件<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 该文件可能存在该项: &lt;classpathentry kind=&#34;lib&#34;&nbsp;&nbsp; path =&#34;你所指定的高版本的地址&#34;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 把她修改成&lt;classpathentry kind=&#34;con&#34; path=&#34;com.android.ide.eclipse.adt.ANDROID_FRAMEWORK&#34; /&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3) 修改AndroidManifest.xml<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在AndroidManifest.xml文件中，application标签后添加&lt;uses-sdk android:minSdkVersion=&#34;3&#34;&gt;&lt;/uses-sdk&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4) 修改default.properties（很重要）<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;该文件最后一行（前面没用#的）target=android-3 该成target=android-8，保存。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;再看看你的工程和新建的android 2.2的工程结构就一样了。]]></description>
		</item>
		
</channel>
</rss>

