说到BEM，很多人并不很喜欢，看见那些特长的类名就烦了，而且在写样式的时候，选择器要那么长，更是让人感到烦感。那么告诉大家一个解决的好文案，就是使用CSS的预处理器。在SassConf大会上，给我们传递了Sass3.3的新特性。这些新特性有很多意义，特别是指令，这让你的代码会得更佳清洁。今天我们主要一起来了解Sass中的特性的使用规范。使用@at-root和BEM的结合，让你尽显BEM的优势。

在新年将至的当中，大家都在思考，都在回味，都在总结，都在向往。我也同样不能脱俗，一直都在思考，为2013一年，为自己走过的这一年，为w3cplus这一年做一个总结，但一直不知道如何执笔开始。思来想去，有了下面的一些记录，只想让这些记录告诉我，2013看走过的一切，同时让我更好的迎接2014年，迎接新的一年，迎接新的人生。

自从有了W3cplus之后，我热衷于前端技术，喜欢前端的活动，更爱上了前端的技术分享。在2013年当中，在众多朋友一起努力之下，总共发表博文279篇，其中技术博文216篇，CSS3教程61篇，CSS3案例25篇，收集前端各类在线工具近100个，整理jQuery插件近300个。还有前端较为新的技术，包括Sass教程47篇，Grunt教程近10篇，响应式设计近27篇。而且在今年在众多同学的帮助之下，组织翻译外国博文近115篇。看到这些数字，也让自己感觉到在2013年当中没有白混，让我自己更好的准备迎接2014年。

在CSS中，要想给一个元素赋予一定的样式，我们必须得先取到这个元素。那么就得需要选择器，通过选择器来选择指定元素，然后赋予所需的样式。而CSS选择器有很多种，比如层次选择器中的后代选择器、兄弟选择器、通用兄弟选择器等。而这些选择器都通过元素与元素之间的关系来确定的，当然在CSS中仅仅不只这几种选择器方式，还有其他优秀的选择器帮助你做更多的事情。而在这篇文章中我们主要探讨的是连体符&在Sass中，是如何让你的选择器变得更加的灵活，更加的简单。

玩过响应式设计的同学或多或少都会在一些媒体上纠结，比如说图片，视频等自适应问题。而且有关于这方面的解决方案各有各的说法，似乎是没有一种方案是绝佳的，这样一来让人倍感头痛。这或许就是前端的烦恼吧。我也一样，虽然整响应式设计蛮久的了，但对于图片方面的自适应处理还真没有找到一个好的方案，这回痛下决心，仔细找了一些相关教程阅读了一回。那么今天将整理一下，网络上有关于图片自适应（此处我称之为弹性图片）解决方案，希望这篇文章能帮助大家解决图片在响应式设计中给大家带来的烦恼。

新发布的Sass 3.3版本，将Source Maps正式纳入了Sass中。这也成为Sass新版本的一大亮点，一大新功能。让广大Sass爱好者可以直接在浏览器中更容易调试自己的代码和Debug相关操作。其实早在2013年七月份Umar Hansa在《Developing With Sass and Chrome DevTools》就详细介绍了如何使用Sass的Source Maps功能帮助大家在浏览器中更好的调试SCSS(或Sass)代码。今天将老调重谈，通过图解的方式向大家介绍如何在Chrome和Firefox浏览器中实现Sass3.3的Source Maps特性。

在Web制作中，有些时候需要实现一些倒影的效果。比如说，你看到一个美女，你想从另一个角度来看这个MM的风姿。在早前要实现这样的效果我们都必须借助于类似于Photoshop这样的制作图软件来实现，然后通过引入一张image。那么除了图片，我们有没有别的方法能实现呢？值得庆幸的是，到目前为之，CSS3有一个属性可以实现。那么今天我们要给大家介绍的就是这个属性的应用。

去年年底看到Dudley Storey在他的一篇文章《2014年前端将会发生什么》一文中提到，如何在Web页面中实现类似于Photoshop制图软件中图层混合模式的效果，特别的激动。从而也知道CSS混合模式这样的一个概念，觉得特别有意思，加上这段时间看到相关的讨论，我也有点手痒痒，今天也将试试这一神技，给我们Web的效果带来什么样的变化。

对于一位程序员来说，对数组并不会陌生。但对于前端人员（像我这样不算前端的前端）对于数组，只是听过，看过，但不知道如何使用？然而在Sass3.3版本中开始引入一个新的数据类型maps，他长得跟数组非常的相似。但也让我极其的苦逼，因为我不懂数组呀，不知道如何下手开始使用Sass的map功能。

想想学习Sass时间也有差不多一年的光景了。在这一年来的时间中，在GitHub不断阅读Sass相关的源码。也在国外涉猎了相关的知识，也让自己初步掌握了一些Sass一些基础知识与技能，当然也让自己喜欢上了Sass，并且在国内致力于Sass的推广。希望各多的前端开发者喜欢上Sass，也希望Sass能真正为前端人员带来好处。

CSS Counters其实就是一计数器，早期在CSS中计数器仅存在于ul和ol元素。如果要使用在div这样的元素上，只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术，允许开发人员使用伪类:after、:before或者伪元素::after、::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是，可以给这些计数器设置独特样式，让其在外观上更靓丽。