使用方法：

• 这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；
• 下面符号列表的后面有两列编号，它们并不太一样，第一列是用于HTML的，你需要在前面加上&#符号；
• 第二列可以用于CSS文件中，但是需要用反斜杠\转义；
• 第二列也可以用于JavaScript，和CSS用法一样，不过要用\u来转义。

需要主意的是：

• 有的字符在不同的浏览器下表现不太一样；比如小雪人 ☃ 在Firefox和Chrome下不太一样，钻石 ◆ 在IE下要比Chrome下要大一点儿；
• 有的字符在某个浏览器下不会显示；当然原因并不是字符代码的问题，而是浏览器的bug，比如，–在Chrome下。。。
• 但是，98%的字符都能在所有浏览器下正常显示的，不过如果你真的要使用，最好仔细在各个浏览器下验证一番。
• 经测试这些字符在Android/iOS等智能终端的识别度比较差，所以，使用的时候要特别注意移动浏览器～～

各种箭头

• ⇠ 8672 21E0
• ⇢ 8674 21E2
• ⇡ 8673 21E1
• ⇣ 8675 21E3
• ↞ 8606 219E
• ↠ 8608 21A0
• ↟ 8607 219F
• ↡ 8609 21A1
• ← 8592 2190
• → 8594 2192
• ↑ 8593 2191
• ↓ 8595 2193
• ↔ 8596 2194
• ↕ 8597 2195
• ⇄ 8644 21C4
• ⇅ 8645 21C5
• ↢ 8610 21A2
• ↣ 8611 21A3
• ⇞ 8670 21DE
• ⇟ 8671 21DF
• ↫ 8619 21AB
• ↬ 8620 21AC
• ⇜ 8668 21DC
• ⇝ 8669 21DD
• ↚ 8602 219A
• ↛ 8603 219B
• ↮ 8622 21AE
• ↭ 8621 21AD

形状

• ⇦ 8678 21E6
• ⇨ 8680 21E8
• ⇧ 8679 21E7
• ⇩ 8681 21E9
• ↷ 8631 21B7
• ↶ 8630 21B6
• ↻ 8635 21BB
• ↺ 8634 21BA
• ⟳ 10227 27F3
• ⟲ 10226 27F2
• ⟰ 10224 27F0
• ⟱ 10225 27F1
• ↵ 8629 21B5
• ↯ 8623 21AF
• ⇵ 8693 21F5

向右的箭头

• ➔ 10132 2794
• ➙ 10137 2799
• ➨ 10152 27A8
• ➲ 10162 27B2
• ➜ 10140 279C
• ➞ 10142 279E
• ➟ 10143 279F
• ➠ 10144 27A0
• ➤ 10148 27A4
• ➥ 10149 27A5
• ➦ 10150 27A6
• ➧ 10151 27A7
• ➵ 10165 27B5
• ➸ 10168 27B8
• ➼ 10172 27BC
• ➽ 10173 27BD
• ➺ 10170 27BA
• ➳ 10163 27B3
• ➾ 10174 27BE

基本形状

• ▲ 9650 25B2
• ► 9658 25BA
• ▼ 9660 25BC
• ◄ 9668 25C4
• ❤ 10084 2764
• ✈ 9992 2708
• ★ 9733 2605
• ✦ 10022 2726
• ☀ 9728 2600
• ◆ 9670 25C6
• ◈ 9672 25C8
• ▣ 9635 25A3

标点

• « 171 00AB
• » 187 00BB
• ‹ 139 008B
• › 155 009B
• “ 8220 201C
• ” 8221 201D
• ‘ 8216 2018
• ’ 8217 2019
• • 8226 2022
• ◦ 9702 25E6
• ¡ 161 00A1
• ¿ 191 00BF
• ℅ 8453 2105
• № 8470 2116
• & 38 0026
• @ 64 0040
• ℞ 8478 211E
• ℃ 8451 2103
• ℉ 8457 2109
• ° 176 00B0
• | 124 007C
• ¦ 166 00A6
• – 8211 2013
• — 8212 2014
• … 8230 2026
• ¶ 182 00B6
• ∼ 8764 223C
• ≠ 8800 2260

法律符号

• ® 174 00AE
• © 169 00A9
• ℗ 8471 2117
• ™ 153 0099
• ℠ 8480 2120

货币

• $ 36 0024
• ¢ 162 00A2
• £ 163 00A3
• ¤ 164 00A4
• € 8364 20AC
• ¥ 165 00A5
• ₱ 8369 20B1
• ₹ 8377 20B9

数学

• ½ 189 00BD
• ¼ 188 00BC
• ¾ 190 00BE
• ⅓ 8531 2153
• ⅔ 8532 2154
• ⅛ 8539 215B
• ⅜ 8540 215C
• ⅝ 8541 215D
• ‰ 8240 2030
• % 37 0025
• < 60 003C
• > 62 003E

音乐符号

• ♩ 9833 2669
• ♪ 9834 266A
• ♫ 9835 266B
• ♬ 9836 266C
• ♭ 9837 266D
• ♯ 9839 266F

对号、错号

•   160 00A0
• ☐ 9744 2610
• ☑ 9745 2611
• ☒ 9746 2612
• ✓ 10003 2713
• ✔ 10004 2714
• ✕ 10005 10005
• ✖ 10006 2716
• ✗ 10007 2717
• ✘ 10008 2718

十字

• ☨ 9768 2628
• ☩ 9769 2629
• ✝ 10013 271D
• ✞ 10014 271E
• ✟ 10015 271F
• ✠ 10016 2720
• ✚ 10010 271A
• † 8224 2020
• ✢ 10018 2722
• ✤ 10020 2724
• ✣ 10019 2723
• ✥ 10021 2725

星星、星号、雪花

• ★ 9733 2605
• ✭ 10029 272D
• ✮ 10030 272E
• ☆ 9734 2606
• ✪ 10026 272A
• ✡ 10017 2721
• ✯ 10031 272F
• ✵ 10037 2735
• ✶ 10038 2736
• ✸ 10040 2738
• ✹ 10041 2739
• ✺ 10042 273A
• ✱ 10033 2731
• ✲ 10034 2732
• ✴ 10036 2734
• ✳ 10035 2733
• ✻ 10043 273B
• ✽ 10045 273D
• ❋ 10059 274B
• ❆ 10054 2746
• ❄ 10052 2744
• ❅ 10053 2745

杂项

• ☻ 9787 263B
• ☺ 9786 263A
• ☹ 9785 2639
• ✉ 9993 2709
• ☎ 9742 260E
• ☏ 9743 260F
• ✆ 9990 2706
• � 65533 FFFD
• ☁ 9729 2601
• ☂ 9730 2602
• ❄ 10052 2744
• ☃ 9731 2603
• ❈ 10056 2748
• ✿ 10047 273F
• ❀ 10048 2740
• ❁ 10049 2741
• ☘ 9752 2618
• ❦ 10086 2766
• ☕ 9749 9749
• ❂ 10050 2742
• ☥ 9765 2625
• ☮ 9774 262E
• ☯ 9775 262F
• ☪ 9770 262A
• ☤ 9764 2624
• ✄ 9988 2704
• ✂ 9986 2702
• ☸ 9784 2638
• ⚓ 9875 2693
• ☣ 9763 2623
• ⚠ 9888 26A0
• ⚡ 9889 26A1
• ☢ 9762 2622
• ♻ 9851 267B
• ♿ 9855 267F
• ☠ 9760 2620

手型、铅笔、笔

• ☜ 9756 261C
• ☞ 9758 261E
• ☝ 9757 261D
• ☟ 9759 261F
• ✌ 9996 270C
• ✍ 9997 270D
• ✎ 9998 270E
• ✐ 10000 2710
• ✏ 9999 270F
• ✑ 10001 2711
• ✒ 10002 2712

天空、植物

• ☽ 9789 263D
• ☾ 9790 263E
• ♂ 9794 2642
• ♀ 9792 2640
• ☿ 9791 263F
• ♁ 9793 2641
• ♃ 9795 2643
• ♄ 9796 2644
• ♅ 9797 2645
• ♆ 9798 2646
• ♇ 9799 2647

星座

• ♈ 9800 2648
• ♉ 9801 2649
• ♊ 9802 264A
• ♋ 9803 264B
• ♌ 9804 264C
• ♍ 9805 264D
• ♎ 9806 264E
• ♏ 9807 264F
• ♑ 9809 2651
• ♒ 9810 2652
• ♓ 9811 2653

象棋，扑克牌

• ♚ 9818 265A
• ♛ 9819 265B
• ♜ 9820 265C
• ♝ 9821 265D
• ♞ 9822 265E
• ♟ 9823 265F
• ♔ 9812 2654
• ♕ 9813 2655
• ♖ 9814 2656
• ♗ 9815 2657
• ♘ 9816 2658
• ♙ 9817 2659
• ♠ 9824 2660
• ♣ 9827 2663
• ♥ 9829 2665
• ♦ 9830 2666
• ♤ 9828 2664
• ♧ 9831 2667
• ♡ 9825 2661
• ♢ 9826 2662

希腊字母

• Α 913 0391
• Β 914 0392
• Γ 915 0393
• Δ 916 0394
• Ε 917 0395
• Ζ 918 0396
• Η 919 0397
• Θ 920 0398
• Ι 921 0399
• Κ 922 039A
• Λ 923 039B
• Μ 924 039C
• Ν 925 039D
• Ξ 926 039E
• Ο 927 039F
• Π 928 03A0
• Ρ 929 03A1
• Σ 931 03A3
• Τ 932 03A4
• Υ 933 03A5
• Φ 934 03A6
• Χ 935 03A7
• Ψ 936 03A8
• Ω 937 03A9

• 项目主页：http://daneden.me/animate/
• 自定义下载样式：http://daneden.me/animate/build/
• git地址：https://github.com/daneden/animate.css

• HTML5 parser

  Opera 11.60采用了名为Ragnarök 的解释器，能够更好的渲染错误的标签，据说可以解决20%的网站兼容问题。

• HTML custom protocol和content handler

  支持HTML自定义协议和内容处理，比如mailto和tel属性以及特定的MIME类型。具体看这里。

• 完整支持ES 5.1
• 更好的支持HTML5 video

  支持muted、preload、buffered和seekable属性。

• 支持发散渐变

  终于支持css3 radial gradient了

• 支持rem单位
• box-shadow修正

  开始支持box-shadow的inset参数，用来实现内阴影的效果。

• 开始支持CSS4 image-rendering属性

  是的，你没有看错，是css4，其实webkit和gecko早支持了。。。用来优化图片的渲染

• 终于支持microdata了

其实这些特性是计划在12.0中发布的，但是据说硬件加速功能可能会比较耗时间，于是11.60仅仅是一个过渡版本。。。

好吧，我个人一直没有用Opera的原因是，龙飞真的太慢太慢太慢了——opera的调试器Dragonfly，是谁开始喊它龙飞的？

移动互联网是未来的趋势，前端开发们需要跟上了。

html5和css3的时代已经到来，但对于移动互联网，它们显然并不是全部，我们需要了解和做的要更多。

PS：本来想要翻译一下，发现都是些常见的单词，不认识的翻下词典哈，不懂的可以留言来问～～

来源：http://www.webhostingbuzz.com/blog/2011/10/19/mobile-internet-trends/

iPhone 4S硬件主要升级CPU和GPU，而这些给升级也为浏览器性能带来了很大的提升：

JavaScript 性能

硬件升级带来的直接结果就是，在SunSpider测试中，iPhone 4S性能提升很大：

嗯，最大的亮点还是Home-Screen Page，也就是webapp，提升了4倍多。。。而UIWebView真的限制很大，其实，android上的WebView组件也很搓。。。

渲染性能

iOS5的GPU加速功能很给力，加上GPU硬件本身的提升，在iPhone 4S上表现很赞：

有没有HTML5/CSS3能力被解放的感觉？我们可以尝试更丰富的视觉表现了。

页面加载时间

测试人员在iPhone4/iPhone4+iOS5和iPhone4S上测试了Alexa中排名前500的网站的页面加载时间，反复测试，发现iPhone 4S平均加载速度提高了13%，而只有60%的页面速度有明显提升，其它到没有太大的差异。这可能是因为JavaScript性能的提升，而页面中用到的JS越多，提升越明显，而用的少的则表现并不明显。

结语

这里我想说的和上一篇文章《iOS 5中safari带来的新特性》是一致的，WebApp会带来更好的性能，基于UIWebView的Native APP则继续承受各种限制。虽然现在说WebApp的春天来了可能为时尚早，但是显然是一个很大的鼓舞。

内容整理自：iPhone 4S Browser Performance Review

CSS

• 终于支持position:fixed了；
• 支持overflow:scroll了，通过-webkit-overflow-scrolling: touch;来实现：

  1 2 3 4

  selector{ overflow:scroll; -webkit-overflow-scrolling: touch; }

• CSS3 gradient语法更新，将-webkit-gradient(linear|radial)拆分为，-webkit-linear-gradient和-webkit-radial-gradient。PS，年初发表过一篇关于《webkit对于CSS3渐变样式语法的更新》的文章，看来现在就剩下android的webkit了。

HTML5

1. 新的兼容HTML5的解释器(parser)
2. 表单增强新增时间类型date, datetime, month, time和range支持，好赞：

   

   

   

   

   

   同时iOS5中safari也增强了number类型的input的验证功能。

• 支持web workers ，传说iOS3中短暂出现过web workers，不过后来消失了，现在又回来了。。。
• 增强ECMAScript5，测试结果显示支持情况跟上PC版的Safari 5.1了。
• 终于支持contenteditable属性
• 支持async script

其它特性：

• HTTP Pipelining支持，Android中webkit和Opera都支持了，Mobile Safari也跟进了。想要具体了解的可以看下这里和这里。
• inline SVG
• UIWebView 和主屏幕webapp升级到Nitro引擎(看下面的测试数据)
• 支持MathML
• CSS和其它文件不再并行下载，这貌似挺悲剧的，不过我很感兴趣这和HTTP Pipelining的关系。。。
• GPU硬件加速，虽然这个之前也有，但是效果并不是很显著，现在，在微软用于标榜IE9硬件加速的测试中，iOS达到了40FPS，而Windows Phone 7是24FPS，Nexus 2则只有可怜的10FPS——iOS4中只有2FPS。。。

一些测试数据

• HTMLTest：267分，iOS 4.3中是206分
• Sunspider JS Benchmark，JS性能测试：

  

  可见首页webapp是用上Nitro引擎了，但是悲剧的是UIWebView的性能却下降了。

  PS:中间的home screen page，@Jeanne 美女说是主屏幕，不过我的理解就是webapp，如有更好的翻译欢迎讨论。

总结

可以看出iOS 5中Safari改进还是蛮大的，而从最后webapp和UIWebView的性能测试来看，或许苹果更加重视了webapp，而不太赞成UIWebView+webapp的这种混搭的方式，虽然很多流行的app都是这种实现，比如著名的PhoneGap框架和Facebook/twitter等流行的在国内不能用的APP。。

参考资源：

• iOS 5 Top 10 Browser Performance Changes
• New Mobile Safari stuff in iOS5
• Safari on iOS 5, HTML5 evolution for iPhone and iPad

目前卓越和当当都有中文版的预售，价格都是51元：

在卓越购买 | 在当当购买

这个网站的开发者是firt，国外网页开发者。

直接访问吧：http://mobilehtml5.org/

PS:这样分享一个网站貌似有发文章充数的嫌疑。不过考虑很多人不玩twitter/微博，好东西要让更多人知道吧。。。xd…

自从一个月前我偶然发现LESS之后我就开始坚定的使用它了。CSS本身对我来说从来不是问题，但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法。拥有一个提供固定数量选项可选的色盘可以让我避免颜色太跳跃以至于从一个已定的风格中脱离。

事实证明，LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性，比如下面这些：

• 混入(Mixins)——class中的class；
• 参数混入——可以传递参数的class，就像函数一样；
• 嵌套规则——Class中嵌套class，从而减少重复的代码；
• 运算——CSS中用上数学；
• 颜色功能——可以编辑颜色；
• 名字空间(namespace)——分组样式，从而可以被调用；
• 作用域——局部修改样式；
• JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。

另一方面，Sass是基于Ruby的，然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦我完成了开发，我就复制然后粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出，从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。

LESS Is More

介绍

在你的项目中引入LESS很简单：

1. 下载less.js;
2. 创建一个文件来放你的样式，比如style.less;
3. 添加以下代码到你的HTML的<head>中:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

请注意link的rel属性。你需要在属性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必须的。如果你在用HTML5语法——为什么不用呢？——你可以省去type=”text/css”和type=”text/javascript”。

其实也有一个服务器端的LESS版本。在服务器上安装LESS的最简单的办法就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)。

变量

如果你是个开发者，变量应该是你最好的朋友。如果你要重复的使用一个信息(本例中就是color)，将它设置为一个变量就可以。这样，你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。看下例子：

1
2
3

@blue: #00c;	
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

如果我们将这些样式应用到3个div上面，我们就可以看到由加上和减掉的HEX值形成的渐变的效果：

从@light_blue到@blue到@dark_blue的渐变效果

关于变量在LESS和Sass中的唯一区别就是，LESS用@，Sass用$。同时还有一些作用域上的差别，我后面会提到。

混入(mixin)

偶尔，我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class，但是你可以用LESS，在样式表中完成。为了描述这一点，我写了一点儿例子：

1
2
3
4
5
6
7
8
9
10
11

.border {
	border-top: 1px dotted #333;
}
article.post {
	background: #eee;
	.border;
}
ul.menu {
	background: #ccc;
	.border;
}

这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。而且它工作的很好：

文字和无序列表都被用上了边框样式

在Sass中，你要在样式规则前面添加@mixin声明，规定它是个嵌套。然后，通过@include来调用它：

1
2
3
4
5
6
7
8
9
10
11

@mixin border {
	border-top: 1px dotted #333;
}
article.post {
	background: #eee;
	@include border;
}
ul.menu {
	background: #ccc;
	@include border;
}

参数混入

就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的：

1
2
3
4
5

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。

选择器继承

这个东西LESS并没有提供。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了：

1
2
3
4
5
6
7
8
9
10
11

.menu {
	border: 1px solid #ddd;
}
.footer {
	@extend .menu;
}
 
/* 上面的写法规则和下面的效果是一样的： */
.menu, .footer {
	border: 1px solid #ddd;
}

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。对于前面提到的例子，你可以这样写：

1
2
3
4
5
6
7
8
9
10
11

#site-body { …
	.post { …
		.post-header { …
			h2 { … }
			a { …
				&:visited { … }
				&:hover { … }
			}
		}
	}
}

上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。

运算

这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！

1
2
3
4
5

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。

Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

1
2
3
4
5

/* Sass */
2in + 3cm + 2pc = 3.514in
 
/* LESS */
2in + 3cm + 2pc = Error

Color函数

在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。

1
2
3
4
5
6
7
8
9
10
11
12

@blue: #369;
.submit {
	padding: 5px 10px;
	border: 1px solid @blue;
	background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
	background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
	background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
	background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
	background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
	color: #fff;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

lighten函数很明显就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。

嗯，最终的效果的确很赞：

很赞的渐变的、基于变量的”Submit”按钮

还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。

Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。

条件语句与控制

这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。

1
2
3
4
5
6
7
8
9
10
11
12
13

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
	background-color: #000;
} @else {
	background-color: #fff;
}
 
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
	.border-#{i} {
	border: $i solid blue;
	}
}

名字空间(Namespaces)

名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。

1
2
3
4
5
6
7
8

#defaults {
	.nav_list () {
		list-style: none;
		margin: 0; padding: 0;
	}
	.button () { … }
	.quote () { … }
}

然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。

1
2
3

nav ul {
	#defaults > .nav_list;
}

作用域

作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。

1
2
3
4
5
6
7
8

@color: #00c; /* 蓝色 */
#header {
	@color: #c00; /* red */
	border: 1px solid @color; /* 红色边框 */
}
#footer {
	border: 1px solid @color; /* 蓝色边框 */
}

因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。

作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。

注释

这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。

导入

导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’;)。

字符串插入

字符串也是可以用于变量中的，然后通过@{name}来调用。

1
2

@base_url : 'http://www.qianduan.net';
background-image: url("@{base_url}/images/background.png");

转义(Escaping)

可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS，你将需要避开它们。

1
2
3
4
5
6
7
8

.class {
	filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}
 
/*实际上将会输出下面的代码: */
.class {
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

JavaScript 赋值

这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。

1
2
3
4
5
6
7
8

@string: `'howdy'.toUpperCase()`; /* @string 变成 'HOWDY' */
 
/* 你也可以使用前面提到的插值： */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* 变为 'HOWDY' */
 
/* 获取文档的信息 */
@height = `document.body.clientHeight`;

输出格式

然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。

结语

这两个方法有很多共同点。对写代码的设计师来说它们都是很玄的工具，它们也可以帮助开发者更有效和快速的工作。如果你是Ruby或HAML的粉丝，那么Sass会是你的好助手。对我来说，一个PHP和JavaScript极客，我倾向于LESS，因为它便于引入和能够使用JavaScript的表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。。

译注：翻译的有些仓促，如果有错误或者不妥的地方，欢迎指出。mixin这个单词，这里直译为“混入”了，不过感觉也不太合适，查了好久也没有见到非常合适的翻译，这里求达人指点。另外，不知道什么原因，lesscss.org貌似在贵国无法访问，大家可以直接访问LESS在git上的仓库，http://github.com/cloudhead/less.js，该项目的wiki也有和官方网站一样的文档，需要的话可以详细阅读下。——神飞

不多介绍，直接去看看吧：Evolution Of Web

值得一提的是，这个项目的代码很不错，值得学习一下。