使用Sass来编写面向对象的CSS代码

语义化和维护

你在意没有语义化，而我更关心的是代码的维护。比如说这个示例所示。

纯CSS来定义对象就没有语义化，但这样就存在一些问题:

    每次改为样式风格时，都需要修改HTML
    没有一种安全的方式来访问DOM元素

对于OOCSS来说，除了维护HTML比较困难之外，其他都是很完美的。我们的CSS很容易扩展，也非常方便用于新的内容中。

因此我们写了部分CSS代码用于在HTML结构中进行扩展。这样的方式真的会变得更好？
Sass的到来

我可以肯定你肯定听过Sass的@extend命令和了解他是如何工作的。因此，要非常感谢选择器的占位符%placeholder，在Sass中可以通过@extend来扩展，如此一来在CSS就是可以创建一些有语义化的类名，也解决了HTML中的存在的问题。

我们必须使用%placeholder来创建对象，通过@extend在类中调用，将其合在一起。这样就可以自己组织代码：

1.   
2. a.twitter {   
3.   min-width: 100px;   
4.   padding: 1em;   
5.   border-radius: 1em;   
6.   background: #55acee  
7.   color: #fff;   
8. }   
9. span.facebook {   
10.   min-width: 100px;   
11.   padding: 1em;   
12.   border-radius: 1em;   
13.   background: #3b5998;   
14.   color: #fff;   
15. }  

所有的对象都使用@extend和基本对象混合在一起，这样就可以得到一个干净的CSS对象，在Sass中是十分容易的事情，我们也不必要再花时间来修改HTML。

1.   
2. %button {   
3.   min-width: 100px;   
4.   padding: 1em;   
5.   border-radius: 1em;   
6. }   
7. %twitter-background {   
8.   color: #fff;   
9.   background: #55acee;   
10. }   
11. %facebook-background {   
12.   color: #fff;   
13.   background: #3b5998;   
14. }   
15.   
16. .btn {   
17.   &--twitter {   
18.     @extend %button;   
19.     @extend %twitter-background;   
20.   }   
21.   &--facebook {   
22.     @extend %button;   
23.     @extend %facebook-background;   
24.   }   
25. }  

具有语义化了，完美？Sass解决了我们的总是。记住：@extend让你的HTML保持最干净，而且又具有语义化，这在Sass中是件十分容易的事情。

我喜欢把其称为OOSass，因为他是OOCSS和Sass的混合物。当然，你不必使用它。如果你不在刻意在HTML中追求语义化，你仍然可以使用OOCSS。每个人都有自己的方式，那么你又是如何构建你自己的CSS呢？请与我们一起分享。