一、处理html

定义多个元素样式：

ul.first.top => <ul class="first top"></ul>

--------------------------------

.box.box$*3 =>

<div class="box box1"></div>

<div class="box box2"></div>

<div class="box box3"></div>

--------------------------------

li{item $}*3

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

添加注释：

.wripper .inner|c => 

.wripper <div class="inner"></div>

<!-- /.inner -->

---------------------

.wripper>.inner|c => 

<div class="wripper">

<div class="inner"></div>

<!-- /.inner -->

</div>

<!-- /.wripper -->

转换标记为html代码：

span.hello|e => &lt;span class="hello"&gt;&lt;/span&gt;

展开结果在同一行显示：

.wrap>.inner|s => <div class="wrap"><div class="inner"></div></div>

 方括号定义属性：

p[name="myp"] => <p name="myp"></p>

p[some attr here] => <p some="" attr="" here=""></p>

花括号定义内容：

p{this is a paragraph} => <p>this is a paragraph</p>

二、处理css

中横线缩小范围：如果pa展开时padding，而我们需要的是position:absolute;  我们可以尝试使用p-a. 

p结尾实现百分比单位样式：w100p => width: 100%;

e结尾实现em单位样式，r结尾实现rem单位样式；