Sass是CSS的一个预处理器，他和CSS一样，需要组织好你的.scss或者.sass文件。在一个项目中如何组织Sass文件将是一个很重要的部分，因为文件组织的好与坏直接关系到您开发所需的时间，特别对于一个大型项目来说得显得重要。今天简单的向大家展示一下如何组织Sass文件。

在Web设计中，时常可以碰到一个网站中实现网格布局。这个过程可能非常痛苦，但保持视觉上和一个精心设计的网格一致性是非常值得的。但当你为一个响应式设计写样式的时候，你并不想在布局为为每个元素计算宽度。相反，您需要一个伸缩的解决方案，在你的网格中可以指定匹配的宽度。我们可以使用一个像960网格系统来解决这个问题，但是在我看来，框架有很多问题，不过我们可以使用Sass来解决这些问题。

为什么要用Sass？或许很多同学都会有此一句，同时也有很多同学在试问LESS（或者其他CSS预处理器语言）和Sass哪个更好，或许有很多同学在抵触使用Sass。认为能写CSS，为什么还要花时间，花成本去学习Sass。为什么要给自己增加额外的复杂性，自己给自己找麻烦。这是很多CSSer的常有的想法，但是Sass（以及其他css预处理程序）确实是一个强大的工具，它可以让任何形式的样式都能够方便的引入开发工作中去。虽然他会花费我一些时间去熟悉、适应，但是我依然很乐于这样做。究竟为何？大家要是感兴趣可以DAN CEDERHOLM的《Why Sass?》进一步了解，为什么要使用Sass。

如果您使用过Sass，你会疯狂的爱用他。虽然在Sass中有很多事情你并不想做，但有很多东西他是相当的有用，也是相当的正常，甚至可以说相当不可思议。这篇文章是Swan同学根据Hugo的《SASS BRAINFUCK》所译，带领我们一起领略Sass中的不一般。

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

Flexbox是CSS3的一个新特性，这个特性可以帮助你实现很多以前实现起来困难的一些效果。比如会让你不会在为浮动感到困惑，不在为水平垂直居中烦恼，不在为自适应布局而感到凝惑。自从Flexbox出现，但也给前端开发人员带很语法版本的困惑，在整个发展过程中经历了三个不同的语法版本，造成前端开发人员不知道怎么使用，今天根据Sfioritto的《THE ULTIMATE FLEXBOX CHEAT SHEET》文章整理了一份Flexbox使用查询列表清单。希望对初学者有所帮助。

CSS中自适应布局是一种常见的布局方式，但当浏览器视窗缩小一定程度的时候，内容会挤跨，特别是侧边栏。CSS3中新增加了一个calc()特性，可以让浏览器根据表达式自动计算，真正达到自适应的布局效果。

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

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