自从CSS3的@font-face属性的出现，使用@font-face制作ICON变得越来越流行，使用的频率也越来越高，在很多网站上都能见到他们的影子。随着IcoMoon的在线生成工具的出现，可以使用IcoMoon制作自己你自己的ICON。今天阅读了jaydenseric写的《FUN WITH SASS & FONT ICONS》教程，介绍了如何使用Sass和结合制作字体图标。实在是强大而又有意思，自己动手操作了一回，准备向大家介绍一下，我自己是如何使用IcoMoon、@font-face和Sass三者结合在一起，制作出自己需要的字体图标。

Sass中的List是一个让人可爱又可恨的东西。主要是他的语法太宽松，你几乎可以做任何你想做的事情。如果要想更好的使用好Sass语言中的List功能，我们就必须的深入了解他。Hugo写了几篇教程，其深入的培析了Sass的List功能，以及其使用方法。而在Sass的社区中对List的功能讨论也是相当的激烈。这些天我也一直在阅读这几篇文章，想让自己能更好的理解Sass中的List功能。今天根据这几篇文章，对List功能的介绍做了一些翻译与整理。

Krasimir Tsonev在《Starting to Write CSS》(中文版本，请点击这里)让你领略了CSS其实也是有思想的，也很有意思的。虽然介绍的各种思想都很强大，但始终没有离开CSS的层面，而CSS却又是非常的脆弱。那么有没有办法，能否结合文中多个思想在一起。你思考过吗？如果你还没有思考并不要紧，今天我们一起跟随Takeshi Takatsudo写的PPT来领略一下OOCSS与Sass的结合。

在这篇文章，主要以两个按钮的制作，来探讨OOCSS的思想以及如何结合Sass更完美的实现。或者说，通过按钮的制作，一起探讨在Sass中如何使用OOCSS的思想。希望大家喜欢。

OOCSS非常棒。但在HTML标签中有很多不具语义化的类名也并不可怕。而在HTML标签上的类名会改变就是一件很有趣的事情。如果你把OOCSS和Sass结合在一起，你会得到两个优势：CSS模块不臃肿和HTML维持不变。

变量是Sass中很重要的一个部分，不过如何更好的使用好Sass中的变量也是一个很关键的知识点。从定义变量到使用变量，也延伸出类似于定义类名以及使用多类名的问题。Sass中的变量需要语义化定义变量名吗？需要定义多个变量名吗？在您使用Sass过程中是否也探讨过类似的问题？如果没有，我们就以这篇文章开始吧，一起探讨这个很有意义的问题。本文根据Ben Smithett的《Stop using so many Sass variables》所译，初步探讨了Sass中变量名的定义以及是否多用更多的变量名。希望大家能喜欢。

Sprites(国内称之为雪碧图)，平常很多时候都是依赖于手工在制作软件中完成，或者依赖于第三方插件自动生成Sprites图。这样虽能实现雪碧图，但在来很多工作量。如果你开始使用Sass或者Compass，你可以发现他们有一个强大的功能，可能使用Sass的mixins自动生成雪碧图。特别是在Retina显屏的时代，使用Sass的mixins生成雪碧更让我们前端人员变得轻松。这篇Evanshajed的《Sass Mixins Icons Sprite with Retina Support》所译，在文章中详细介绍了如何使用Sass的Mixins自动生成普通显屏和Retina显屏的雪碧图。希望这篇文章对大家有所帮助。

性能对于Web前端开发人员是必备的一项技能。CSS3和HTML5的新特性帮助我们改善了应用程序，但有时这些特性并没有得到很好的支持。这就是优雅降级。你想在新的浏览器中使用这些特性，但不能忽视对传统浏览器的支持。我最近开始在做一个新的项目，他必须要支持IE8。由于级联问题的嵌套，使用EM单位时不好把控，所以我决定在这个项目中开始使用有用的rem单位，这样更容易理解和维护。这种方法的主要问题是IE8不支持rem单位。最后，我们需要针对于这种情景创建一个后备方案：使用px单位做降级处理。

在Web开发中，每一位写CSS的同学不管使用什么方式进行开发，都必须面对CSS代码中有很多重复性代码。就算你使用OOCSS或者大家讨论激烈的模块化开发，都会有一些代码使用不上。这样直接的后果就是让你的文件变得臃肿，并且难以维护。但是使用Sass，他可以让你避免这些问题。今天我们就通过Sass的@each、@for和@function等方法，来解决这个问题，帮助你减少重复性的代码，甚至是无用的代码，真正做到按需生产。

Font Awesome是Dave Gandy通过字体制作的几百个icons图标。在前端界享有盛名。使用@font-face制作的图标可以随意的放大，并通过CSS中字体相关的CSS对图标进行美化，比如说可以改变图标颜色、大小和增加阴影等，但他也存在一定的弊端。为了使用部分图标，不得不加载所有图标的样式。如果你使用Sass将可以改变这一切，今天这篇文章就是介绍了Sass如何通过几个Mixins和Function等特性来实现按需开启需要的图标。

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