SASS之精华-@mixin、@extend和PlaceholderSelectors_html/css

# 掌握 SASS 之精华—— @mixin、 @extend 和 Placeholder Selectors最近使用 Rails 折腾小项目，CSS 框架选用了 [Bourbon](https://github.com/thoughtbot/bourbon) 并结合了 [bitters](https://github.com/thoughtbot/bitters) 发现其能很好地利用了 SASS 特性。轻量级且定制性强，相比 bootstrap,Semantic-ui 这类啥都封装好的框架，轻量级多得多。在使用的过程中感叹在 Web 项目一开始的时候就得良好地组织好前端代码，不然地话，在模板文件中到处都是一堆 CSS ，后来者无力去改变也只能是继续堆砌 CSS，毫无阅读性以及组织结构规范，导致了大量的重复样式代码，CSS 复用性不高，作为一名代码癖的程序员，你还能忍受吗？还有一点就是开发者随便改动一个元素的class 或者 id 的样式，在没有良好组织样式代码的前提下很容易导致不可控的样式改变，等到线上更新了才他妈意识到这个class对另外一个元素的样式也改了。接下来看看一个使用了 bitters 组织的 Rails 项目样式代码的组织。- stylesheets - base - extends - _button.scss - _clearfix.scss - mixins - _flash.scss - _bases.scss - _buttons.scss - _forms - _lists.scss - ... - _variables.scss - _account.scss - _users.scss - ... - application.css.scss看到这样的目录结构，有没有很 SASS 味？ _bases.scss 文件中 **@import** 了 base 目录下包含了整个样式公共的一些文件，也许你也看到了 **extends** 和 **mixins** 子目录，别着急先上饭前菜，这篇文章重要就是要说明它们。_variables.scss 内容只要是颜色值、链接样式、字体样式等一些变量，例如```$black: #000000;```极其方便地被引用和复用。base 文件夹下的其他文件都是各种 HTML 元素的样式，有人说，你用 Semantic-ui 多方便啊，为啥这么折腾，哈，这不是我们今天讨论的内容；然后就是base 文件夹以外的一些样式文件都是按照其业务逻辑来组织，各个样式文件各司其职多好！ ##### ~~