有的电影值得一个人细细品味，就这样，在电影院座位静静等候开场，悄无声息。

唢呐是中国民族吹管乐器的一种，也是中国各地广泛流传的民间乐器。由波斯人发明，唢呐的音色明亮，音量大，管身木制，呈圆椎形，上端装有带哨子的铜管，下端套着一个铜制的喇叭口（称作碗），所以俗称喇叭。在台湾民间称为鼓吹，广东地区亦将之称为“八音”。

唢呐也许陌生，但喇叭想必耳熟能详，《百鸟朝凤》这电影正和“喇叭”相关。

A：兄弟说的头头是道，接受一下采访？
B：某问题。

A：一句话概括一下电影讲了些什么？
B：一个唢呐班子的昌盛、传承、发展、没落为故事主线，展示了中华民族民间乐器唢呐为西方音乐文化所同化的现象，象征着像唢呐一样的某些传统民族文化正在消失。

A：想到什么？
B：一个拉着唢呐的老朽沦落到街边卖艺维生的场景，在都市的大街道常常有一些上了年纪的艺人用长笛、二胡等不流行的民间乐器上演绎着同样的片段；又如西方的节日受年轻人的欢迎程度远远高于传统文化节日，以致于节日的气氛、形式多样化、格调上西方节日的气焰往往凌驾于传统节日之上；还有中华戏曲文化，我亲身的例子是偶尔父母在听戏剧，一副悄然自得、沉静其中的感觉，而身旁的我却完全不懂这部戏曲在表达什么，我缺乏对戏曲文化的审美感，抑或说对这种传统文化我一无所知。

A：印象最深的片段？
B：电影中焦师傅即使咳着血也要带领自己的弟子将曲子演完，因为他知道在时代变迁的十字路口，寻找到一个肯将唢呐吹到骨子里的接班人是来之不易的，焦老头子要传给他弟子的其实不是唢呐，而是自己是一生的事业、使命、热血。

A：潮汕不是信仰佛教吗？讲讲你的经历
B：如果这种民间乐器没有这样寻找接班人，或许早已在当今销声匿迹了，文化传承很重要。潮汕人大都信仰佛教，与其说信仰，不如说佛教给与我们一种寄托亦或者希望。逢年过节或恰初一十五等等，烧香拜佛、请愿保佑不在话下，求平安、包富贵如是而已。然而这些习俗却无法传承到下一代的我们，因为一旦受过高等教育就会定义为“迷信”从而敬而远之了。

A：还有其他补充？
B：随时代的发展我想有很多这样的传统文化、习俗在渐渐没落，正如电影中焦师傅那样，从前吹唢呐众人哭喊朝拜，仿佛看脚了唢呐唤起的长辈仙逝的灵魂，但到了游天明那一代唢呐连找活干都变得困难了，更别说当做一门生存的匠活了。

这种没落的变化在天明父亲对他吹唢呐的态度变化中显而易见，从天明小时候为他求师四处寻关系到当他看到天明后来对着唢呐发呆时的一句话“还不丢掉这些破玩意”的转变，不得不说时代发展捧起一些东西的同时也会摔破一些东西，以致于这些即将被摔破但是对于民族而言是不可缺少的东西，最终要通过贴上“非物质文化遗产”来拯救了。

电影往往是社会的真实写照。

传承民族文化是必须的，但这种传承不能只通过班子传班子或者师傅传弟子，因为这样的文化不具有普及性，而是局限在某个区域的传承。把传统文化普及宣扬下去，让更多的青年了解，让更多的人懂得欣赏它的魅力，才是这种文化经久不衰的奥秘。

“游戏”，这个常被21世纪父母所厌恶至极的让儿女玩物丧志的名词，今天竟有点想为它沉冤昭雪的冲动。原因也很简单，除了它在我人生中抑或说读书生涯占据了巨大的比重让我不得不提下之外，更因为在互联网极度繁华的现在，它似乎有种走出阴霾渐渐被人们所理解的迹象，电竞游戏门类更产生了一个庞大的生态链，让人们觉得玩游戏也可以不是“颓废”、“懒”、“丧志”的代名词，它也可以成为赚钱、娱乐的一种手段。

当然，今天主题并非在游戏的发展抑或现在游戏产业的革命，只是自己热衷于记录跟自己人生息息相关的东西，所以，如果你是80后抑或90年初的孩纸，你也许能在文中找到与我类似的经历和产生共鸣，因为那是属于一个年代的乐趣。

“魂斗罗”、“超级玛丽”、“雪人兄弟”、“坦克大战”等这些个在部分人眼里耳熟能详的名词，真的是属于小霸王时代的年轻人的乐趣。

在那个电脑十分不普及的年代，玩游戏机成了年轻人的fashion。我记得那时候我才6岁，家里买来一台小霸王，接触到第一款游戏好像就是魂斗罗，兄弟姐妹四人两两轮流着玩。

后来觉得一款游戏乏味了，就开始不断地买游戏带，让我印象最深的就是超级玛丽了。听着金币那个“滴滴”的声音和最终跳旗的优越感，满满的都是回忆。虽然现在出了电脑版的和手机版的，但在这个年代似乎感觉不到儿时的乐趣了。

但是，我的游戏生涯远远不止于此。我的家庭属于接触PC比较早的，在我大概8岁（00年）的时候，我爸购买了一台PC电脑，不知为何我妈似乎不排斥游戏，从外面购买了一些游戏光碟。

见到光碟的时候，我们兄弟姐妹几个都乐坏了，要知道在那个没有互联网的年代，玩PC游戏简直是儿童的无上乐趣，当然这跟兄弟或者小伙伴一起玩的乐趣是分不开的。

有个游戏印象很深，就是《大富翁4》，成为地产大亨是游戏的梦想，也是生活的梦想。嘎嘎，好像比较难实现，先挣他一个亿再说。

所以直到现在，我的母亲还有一层只有我自己知道的身份——我的游戏启蒙导师

• 泡泡堂：第一款让我小学5年级进入网吧的游戏*
• 跑跑卡丁车：一款让我与初中好友乐在其中的游戏
• QQ幻想：第一款rpg游戏
• CF：灵巧类游戏
• Dota：考验智慧和反应的竞技类游戏

最近重温了《锋利的jQuery》这本书，受益匪浅。

如果你和前端若只如初见，如果你和jQuery一见钟情，一纸文字铺满了你相恋的他（她）的所有。

我把整理出来的知识点用网状图串联了起来，并且每个部分分点概述，将一些类似的方法和属性排列在一起。其实最重要的区块就是5个部分。

根据用户交互的基本流程，通常代码是获取元素，然后绑定相应的事件，接着触发这个事件后可以选择不同的交互方式。比如增加节点改变Dom，或者对某个元素设置动画、亦或者进行aJax与后台进行数据交互。

jQuery 选择器总结（继承CSS风格）

常用

标签、Id、class选择器、群组选择器、后代选择器（只有Id返回单个元素）

层次选择器

后代选择器

选取祖先所有的后代元素（后代包括孙、曾孙…..） A B

子元素选择器

选取父元素的子元素（不包括子元素的子元素） A>B

后一个同辈元素

选取指定元素元素后一个同辈元素（集合） A+B 等价于next（）方法

后面的所有同辈元素

选取指定元素后面的所有同辈元素（集合） A~B 等价于nextAll（）方法

这里将siblings（）方法与next（）和nextAll（）作对比，

siblings（）是选取匹配元素前后所有同辈元素，与位置无关，结果不包含自己本身

过滤选择器

注意：在所有过滤选择其中，只有 :first和 :last和 :eq（index）返回单个元素，其他都返回集合元素

基本过滤选择器(index从0算起)

选择首元素

1

:first

选择末尾元素

1

:last

去除所有与给定选择器匹配的元素

1

:not(selector)

索引匹配

• 索引从0开始，选择索引是偶数的所有元素

1

:even //若匹配元素的子元素也匹配，也要计算在内

• 选择索引是奇数的所有元素

1

:odd

• index从0开始，选择索引等于index的元素

1

:eq(index)

• index从0开始，选择索引大于index的元素

1

:gt(index)     // gt是greater than的缩写

• index从0开始，选择索引小于index的元素

1

:lt(index)

选取所有的标题元素

例如h1,h2,h3等

1

:header

选取当前正在执行动画的函数

1

:animated

选取当前获取焦点的元素

1

:forcus

内容过滤选择器

选取文本内容中含有text的元素

1

:contain(text)

选取含有选择器所匹配的元素的元素

1

:has(selector)

选取含有子元素或者文本的元素

1

:parent  //将文本元素计算在内

选取不包含子元素或者文本的元素

1

:empty  //将文本元素计算在内

可见性过滤选择器

选取所有不可见元素

1

:hidden    //包括display：none 和 visibility：hidden

选取所有可见元素

1

:visible

属性过滤选择器

选取拥有此属性的元素

1

[attribute]

选取属性值为value的元素

1

[attribute=value]

选取属性值不为value的元素

1

[attribute!=value]

选取属性值以value开始的元素

1

[attribute^=value]

选取属性值以value结束的元素

1

[attribute$=value]

选取属性值中含value的元素

1

[attribute*=value]

选取属性值等于value或者以value作为前缀（value后跟着连字符“-”）的元素

1

[attribute|=value]

用属性选择器合并成复合选择器

1

[attribute1][attribute]...

子元素过滤选择器（index从1算起）

选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）

1
2

//除了这三个参数，也可以写n的表达式，比如3n+1，n从1开始
:nth-child(index,odd,even)

选取每个父元素下的第一个子元素

1

:first-child

选取每个父元素下的最后一个子元素

1

:last-child

这里与基本过滤选择器的：first和：last做对比，：first和：last只返回单个元素，且不是针对子元素。

选取某个元素是它父元素中的唯一的子元素

1

:only-child

表单对象属性过滤选择器

选取所有可用元素

1

：enabled

选取所有不可用元素

1

：disabled

选取所有被选中的元素（单选框、复选框）

1

：checked

选取所有被选中的选项元素（下拉列表中）

1

：selected

表单对象选择器

选取所有的input、textarea、select和button元素

匹配表单内上述4种元素

1
2

$.('#form1:input')
`

只匹配input元素

1
2

$.('#form1 input')
`

匹配单行文本框

1

:text

匹配所有密码框

1

:password

匹配所有的单选框

1

:radio

匹配所有的多选框

1

:checkbox

匹配所有的提交按钮

1

:submit

匹配所有的图像按钮

1

:image

匹配所有的重置按钮

1

:rest

匹配所有的按钮

1

:button

匹配所有的上传域

1

:file

匹配所有不可见元素

1

:hidden

jQuery事件总结

加载Dom事件

1

$(window).load() 或 $(document).ready()

事件绑定

1
2

常用绑定方法   bind(type [,data] , fn )             
//type类型有blue、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress和error等

简写的事件

比如click，mouseover,和mouseout

合成事件

hover() 事件

hover()事件是mouseenter和mouseleave的合成事件
hover()和mouseover、mouseout有区别。后者光标进入绑定元素的子元素时，会触发mouseout

toggle(fn1,fn2…)

用于模拟鼠标连续单击事件第一次触发fn1，第二次触发fn2。依次触发到最后一个，随后重复对这几个函数轮番调用

事件冒泡–阻止事件冒泡–事件对象

jQuery中不支持事件捕获，需要事件捕获应用js原生方法

阻止事件冒泡的方法

1

bind(type,function(event)) {}      //事件对象

bind方法中传入event对象并使用event.stopPropagation()
注意：如果你使用jQuery1.7版本或者更新，请使用on()方法，jQuery对绑定进行了封装，替代了原来的delegate()、live()、bind()方法

阻止默认行为

1

event.preventDefault()

两者都阻止

在事件处理函数中return false即可

事件对象的属性

获取事件的类型

1

event.type

阻止默认的事件行为

1

event.preventDefault()

阻止事件的冒泡行为

1

event.stopPropagation

获取触发事件的元素

1

event.target

获取光标相对于页面的x坐标和y坐标

1

event.pageX   和 event.pageY

获取鼠标单击事件（click)中鼠标的左、中、右键

1

event.which分别返回1、2、3

移除事件

1

$.unbind( [type] [fn])

注意：如果你使用jQuery1.7版本或者更新，off()替代unbind()方法

模拟操作

有时需要模拟用户操作来达到单击效果，例如在用户进入页面后，就触发click事件，而不需要用户主动单击。

1

$.trigger(type，[data]) //触发绑定的事件，默认执行浏览器操作

1

$.triggerHandler()  //  触发绑定的事件，而不执行浏览器默认操作

jQuery-Dom总结

基本操作–查找、创建、插入、删除、复制、替换、包裹（7种操作）

查找元素节点

jQuery选择器

查找属性节点

1

$.attr()

创建元素节点

选择器的形式

1

$("html")

创建文本节点 (与元素节点一起创建)

1

$("html")  //将文本包含在html中

创建属性节点(与元素节点一起创建)

1

$("html") //为元素添加属性

追加元素

在每个匹配元素的内部追加内容

1

$.append()  或$.appendTo()

在每个匹配元素的内部前置内容

1

$.prepend()  或$.prependTo()

在每个匹配元素之后插入内容

1

$.after()        或$.insertAfter()

在每个匹配元素之前插入内容

1

$.before()    或$.insertBefore()

删除节点有三个方法

remove()、detach()、empty()

empty()不是真正意义上的删除，只是清空节点内部内容

remove()、detach()

相同点：清除后会返回该节点的引用，即可以继续插入该节点到Dom

不同点：detach()会保留节点绑定的事件、附加的数据

复制节点

1

$.clone（[true]）           //传入参数true可选，表示同时复制节点的绑定事件

替换节点

1

$.replaceWith()     和$.replaceAll()   //前者A用B来替换   后者A替换所有的B

将匹配元素进行单独的包裹

1

$.wrap() //A用B来包裹

将匹配元素用一个元素包裹

1

$.wrapAll 和 $.wrapInner

属性操作–获取与设置属性、删除属性

获取和设置属性

1

$.attr()   和    $.attr({ })

删除属性

1

$.removeAttr()

样式操作–获取与设置样式、添加样式、删除样式、切换样式、判断是否含有某个样式

获取与设置样式

其实就是用属性操作中的$.attr()方法获或设置class的值

追加样式

1

$.addClass()            //设置是替换，追加是保留原来的class基础上增加

移除样式

1
2

$.removeClass([class1] [class2]..)       
//可以删除多个class，参数之间空格。无参数表示删除所有的class

切换样式

1

$.toggleClass([class1] [class2].. )          //原来有传入的样式名，则删除；无则添加

判断元素是否有某个样式

1

$.hasClass()        //有则返回true  无则返回false

文本操作–设置与获取HTML、文本和值

设置与获取HTML

1

$.html()

文本

1

$.text()       //通常用于内容标签

值

1

$.val()         //通常用于文本框 、下拉列表、单选框、多选框等；如果元素为多选，则返回一个包含所有值得数组

遍历访问节点（常用于事件处理中）

获取匹配元素的所有子元素集合

1

$.children()                 //与$.parent()相反

这里还有一个$.parents()的方法，获得每个匹配元素的祖先元素，与parent()不同，获得第一个父节点时并没有停止查找，而是继续查找最后返回多个节点

另一个$.closet()与$.parent()类似，不同的是closet()返回匹配元素的最近的一个父节点

取得匹配元素后面紧邻的同辈元素

1

$.next()            后面紧邻所有   $.nextAll()

取得匹配元素前面紧邻的同辈元素

1

$.prev()            前面紧邻所有   $.prevAll()

取得匹配元素前后所有的同辈元素

1

$.siblings()

在当前选中元素中找到符合条件的后代，返回的是子元素

1

$.find()

在当前选中元素中找到符合条件的当前元素集合，返回的是当前元素

1

$.filter()

对 jQuery 对象进行迭代，为每个匹配元素执行函数

1

$.each(function(){})

…省略的许多方法与jQuery选择器类似

CSS-DOM操作

获取或设置元素的样式属性

1

$.css()

获取或设置元素的宽度或高度

1

$. width(value)和$.height(value)//  $. css("width")也可以获取元素宽度，但与元素的样式设置有关，可能获取到为auto；

而$.width()获取的是元素的实际宽度

关于元素定位常用的方法

获取元素在当前视窗的相对偏移

1

$.offset().dir    //dir 可以为top right bottom left

获取元素相对于最近一个position样式属性设置为relative或者absolute父节点的相对偏移

1

$.position().dir  //dir 可以为top right bottom left

获取元素的滚动条（假如有的话，通常是那些设置了overflow：auto的元素，而内容过长）距离顶端或左侧的距离

1

$.scrollTop()

1

$.scrollLeft()       //通常上下布局的页面document一般都会有滚动条，这时候使用  $(document).scrollTop()可以很方便获取滚动条里页面顶部的距离

jQuery动画总结

基本动画 （速度参数 slow normal fast 自定义毫秒数）

1

show()和hide()   //显示隐藏 两者组合 toggle()

1

fadeIn() 和 fadeOut() //淡入淡出两者组合 fadeToggle()

1

slideDown() 和slideUp  //向下滑动显示  向上滑动隐藏两者组合 slideToggle()

自定义动画

注意: css()方法并不会加入动画队列中，而会在动画开始就立即执行，要在动画执行完成后改变css样式，可以将css()写入回调函数中

animate 同时进行的动画 只需传入多个键值对
animate 进行分步动画 只需按jQuery链式写法就好

1

animate({ },speed,callback)  //实现累加累减动画只需在px前用+=或-=

停止正在进行的动画

1

stop([clearQueue],[gotoEnd])     //默认情况下  clearQueue 接gotoEnd都是false

要点：

• stop() 停止当前正在进行的动画(只阻止链式动画队列中当前运行的那一步动画)

• stop(true，false) 停止当前的动画队列(正在进行+未进行，即链式动画队列)

  使用情况：比如用户将光标移入某个元素，动画没结束就移出了。

• stop(true，true) 停止当前的动画队列，并让动画直接到达结束状态

  使用情况： 通常用于后一个动画需要基于前一个动画的末状态的情况

判断元素是否处于动画状态（避免动画累计导致和用户的行为不一致）

常用方法：

1
2
3
4
5

if(! $(element).is(":animated")){
//如果当前没有进行动画，则添加新动画
}

延迟动画的方法

1

delay(毫秒)

jQuery-ajax

说明：ajax仅做简要总结，更多可参考jQuery中文参考文档,包含了所有新版API或弃用API的说明。

jQuery.ajax([setting])方法

1.5.0以前版本

返回的是XHR对象

• type：类型， “POST”或“GET”，默认为“Get”
• url：发送请求的地址
• data：是一个对象，连同请求发送到服务器的数据
• dataType： 预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来只能判断，一般采用j- son格式，可以设置为”json”
• success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串
• error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象

1.5.0及更新版本

jQuery使用原生promise对象封装了一个deffered对象，因此你可以新版可以写成链式回调函数
。

1
2
3

$.ajax("test.html")
　.done(function(){ alert("yes"); })
　.fail(function(){ alert("no"); });

done()相当于success方法，fail()相当于error方法。采用链式写法以后，代码的可读性大大提高。

有章服之美谓之华；有礼仪之大故称夏。

在当今百花齐放的电影片制作时代，有的人喜欢喜剧片，有的人喜欢科幻片，有的人喜欢充满童真的动画片，更有不少人喜欢恐怖片，可谓众口难调。但好电影能迎合绝大多数人的口味，今天看的正是这样一部去年末上映的电影，弥补了没去影院观看的遗憾。之说以写下这迟来的感受，因为我确实被震撼到了…

怀着看喜剧片的心情看《唐人街探案》，正如当初看《泰囧》《港囧》的感觉，本以为笑笑就过了，但渐渐发现有种看恐怖片的味道。不得不承认，将这一元素表现的淋漓尽致的是小女孩最后那一抹微笑。作为外行人来看，我觉得那是影帝级的水平，因为当背景音乐悬紧，她嘴角微扬，低沉地说出那一声“恶人是不是改这么笑”的时候，我浑身鸡皮疙瘩都起来了，似有一种闯进鬼的房间稍感不适连忙说出“对不起我走错房间”的感觉。如果你看过《跑男》，相信你对古城堡继承者那集会有印象，那时候邓超作为继承者即将可以通过镜子知道谁是外族人时，外族人Alla打开房门对邓超说了一句“Can I trust you？”后来邓超回忆，“那种眼神是我一生中都难忘了。没错《唐人街探案》小女孩的眼神和微笑正有那种至生难忘的感觉，幸好是白天看的（还是“吓尿了”），否则这一夜可谓彻夜难眠了。
s

喜剧片我向来不感冒，总觉得这样的片总是一笑而过没有深度；恐怖片是不敢看，可能因为我想象力太丰富会留下后遗症；侦探片偶尔看下，却不喜欢太过拘泥的情节。《唐人街探案》将三者中部分微妙元素结合的恰到好处，除了所有电影有的起承转合剧情，也不少那些温馨抑或引人深思的元素。随着真相被一层层剥离，人性也一步步立体，《唐人街探案》在喜剧在笑声的背后揭露的其实是关于善恶、关于真相的大命题。

“一阴一阳之谓道也，继之者善业，成之者性也。”—《周易·系辞》
道家认为事物都有阴阳两个方面、两种力量，相反相成，相互推移，不可偏废，构成事物的本性及其运动的法则。无论自然、人事，都表现此道。对应小女孩最后那句话，“个体生命不同，但世间善恶总量不变，每个人都扮演着各自的角色，有的是善有的是恶。”

在这个社会运转体系中，善和恶作为一种人的附属属性在发生不断地转换，但我认为一心从善的人应该占据着善的绝大部分比重，因为世界的美好正是由这些一心从善的人构筑的。当然再美好的世界都会有罪恶的人，有的遇到感化洗心革面，有的则一恶到底。尽管恶非本性，因为我认可“人之初，性本善”，罪恶的人总是某种极端环境下的产物，其生成转换的数量在于人的价值观正确与否和心理最后一道防线何时被打破。价值观积极向上的，心理强大的总能抵御或想法相处环境带来的负面因素。罪恶的人思想受环境慢慢影响心中慢慢发生质变走上犯罪道路，希望以罪恶的手段为自己谋求生存的空间和心灵的一片净土。所以，环境对人的影响太重要了，“勿以恶小而为之，勿以善小而不为”，做个积极向上的人，尽可能接受健康有益的信息和事物，于人于己都是莫大的善举，我想这就是电影能给我带来的正能量吧。

“排除所有的不可能，剩下的那个在不可思议，都是事实的真相”，我不希望社会中的“真相”会像电影中被埋没，只希望这样的“真相”越来越少。

随着对CSS的用法了解比较熟悉，觉得有必要学习一下CSS预编译的语言。有一种是Less，另一种是Sass。科普了一下，两种语言的主要不同是他们的实现方式，Less是基于javascript在客户端处理的，而Sass是基于Ruby在服务端处理的。但它们之间也有共同点

• 混入(Mixins)——class中的class；

• 参数混入——可以传递参数的class，就像函数一样；

• 嵌套规则——Class中嵌套class，从而减少重复的代码；

• 运算——CSS中用上数学；

• 颜色功能——可以编辑颜色；

• 名字空间(namespace)——分组样式，从而可以被调用；

• 作用域——局部修改样式；

• JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

这篇博客主要记录一下Sass的用法

Sass用法指南

什么是Sass

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。

安装和使用

安装

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：

1

gem install sass

然后，就可以使用了。

使用

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

1

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名。

1

sass test.scss test.css

SASS提供四个编译风格的选项：

1
2
3
4

* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

1

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

1
2
3
4

// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。

基本用法

变量

SASS允许使用变量，所有变量以$开头。

1
2
3
4

$blue : #1875e7;　
div {
  color : $blue;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

1
2
3
4

$side : left;
.rounded {
  border-#{$side}-radius: 5px;
}

计算功能

SASS允许在代码中使用算式：

1
2
3
4
5

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

嵌套

SASS允许选择器嵌套。比如，下面的CSS代码：

1
2
3

div h1 {
  color : red;
}

可以写成：

1
2
3
4
5

div {
  hi {
　　   color:red;
　　 }
}

属性也可以嵌套，比如border-color属性，可以写成：

1
2
3
4
5

p {
  border: {
　  color: red;
  }
}

注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

1
2
3

a {
  &:hover { color: #ffb3ff; }
}

注释

SASS共有两种注释风格。
标准的CSS注释 / comment / ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

1
2
3

/*! 
  重要注释！
*/

代码的重用

继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

1
2
3

.class1 {
  border: 1px solid #ddd;
}

class2要继承class1，就要使用@extend命令：

1
2
3
4

class2 {
  @extend .class1;
  font-size:120%;
}

Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。

1
2
3
4

@mixin left {
  float: left;
  margin-left: 10px;
}

使用@include命令，调用这个mixin。

1
2
3

div {
  @include left;
}

mixin的强大之处，在于可以指定参数和缺省值。

1
2
3
4

@mixin left($value: 10px) {
  float: left;
  margin-right: $value;
}

使用的时候，根据需要加入参数：

1
2
3

div {
  @include left(20px);
}

下面是一个mixin的实例，用来生成浏览器前缀。

1
2
3
4
5

@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

使用的时候，可以像下面这样调用：

1
2

#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }

颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

1
2
3
4

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

插入文件

@import命令，用来插入外部文件。

1

@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令。

1

@import "foo.css";

高级用法

条件语句

@if可以用来判断：

1
2
3
4

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
}

配套的还有@else命令：

1
2
3
4
5

=@if lightness($color) > 30% {
  background-color: #000;
=} @else {
  background-color: #fff;
}

循环语句

SASS支持for循环：

1
2
3
4
5

@for $i from 1 to 10 {
  .border-#{$i} {
　  border: #{$i}px solid blue;
  }
}

也支持while循环：

1
2
3
4
5

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

each命令，作用与for类似：

1
2
3
4
5

@each $member in a, b, c, d {
  .#{$member} {
　  background-image: url("/image/#{$member}.jpg");
  }
}

自定义函数

SASS允许用户编写自己的函数。

1
2
3
4
5
6

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}