CSS进阶指引

你不要觉得CSS没什么重要可言？最近几年他成为一个热门的话题，很多人都在讨论他。CSS并不是一个简单的事情，前端开发者可以使用他将页面制作的更佳漂亮。看得更远一些，我们更关心的是网站的性能以及如何制作出更好的网站。在本文中，我想分享我最近几个月的学到的有关于CSS编码的知识。作为一个程序员，我真正感兴趣的事情是框架（Architectural）部分。我觉得写CSS应该需要去改变，为此我深挖了很多知识。我搜索了好的程序、工作流和原则。这篇文章将带领大家和CSS一起旅行，很多人都说写CSS并不是编程，我就不同意，我说写CSS同样是有趣的，富有挑战性的。
CSS预处理器
让我们一起面对吧，在世界上写CSS并不是一件可笑的事情。CSS预处理器看起来就像CSS，但他更像一个魔术师一样，使用一些魔法会产生有效的CSS代码。这让你的样多和浏览器之间新增加了一层，这样不是更加的糟糕吗？看上去是这样，但事实不是这样的，因为CSS预处理器提供了一些真正有用的特性。
　　连接（Concatenation）

　　我认为最有价值的东西是连接你的文件。我相信，你知道使用@import来引用你的.css文件，告诉浏览器获取这个文件。这样做，浏览器需要增加一个请求，这样有点麻烦，因为你可能有很多个这样的文件。增加额外的请求，使你的程序性能变得更低。如果您使用CSS预处理器语言，这个问题将不会存在。他们只会编译你样式文件中单个.css文件。
　　扩展（Extending）

　　LESS和Sass是最主要的两个CSS预处理器。我们都支持扩展。虽然他们的工作方式略有不同，但他们的想法是一样的。你可以做一个基本的类（通常称为mixin）和一群属性，然后在另一个选择器导入这些属性，如：

1. // less   
2. .bordered(@color: #000) {   
3.     border: dotted 2px @color;   
4. }   
5. .header { .bordered; }   
6. .footer { .bordered(#BADA55); }   
7.   
8. // 编译出来的CSS   
9. .header {   
10.     border: dotted 2px #000000;   
11. }   
12. .footer {   
13.     border: dotted 2px #bada55;   
14. }  

　　这里的问题是，如果你没有定义一个参数的mixin，例如刚才的示例：

1. .bordered {   
2.     border: dotted 2px #000;   
3. }  

　　这是最后编译的CSS文件，无论你是否使用都没有任何关系。因为他是一个有效的选择器。在Sass中我们可以做得更灵活一些。他有混合(mixins)、扩展（extends）和占位选择器(placeholders)（如果您想看到他们之间的区别，我强烈建议您阅读这篇文章）。接下来我们简单看看Sass是如何工作和编译的：

1. // sass   
2. @mixin bordered($color: #000) {   
3.     border: dotted 2px $color;   
4. }   
5. .header { @include bordered; }   
6. .footer { @include bordered(#BADA55); }   
7.   
8. //编译的CSS   
9. .header {   
10.     border: dotted 2px black;    
11. }   
12. .footer {   
13.     border: dotted 2px #bada55;    
14. }  

　　它看起来和前面几乎相同，但如果我们秋看第二个placeholder的用例：

1. // sass   
2. %bordered {   
3.     border: dotted 2px #000;   
4. }   
5. .header {    
6.     @extend %bordered;    
7. }   
8. .footer {    
9.     @extend %bordered;    
10. }   
11.   
12. // 编译的CSS   
13. .header, .footer {   
14.     border: dotted 2px