没有css设计器,还没使用CSS预处理器？你OUT了

CSS既是一个美妙的创新也是一个不可错过的机会。它通过把表现和结构分离来改进网页设计的过程。但是，CSS有也许多限制。曾写过CSS的人都知道，做一个最简单的网站时，CSS会有很多重复的地方，导致很多覆盖问题，覆盖应用多了，代码逻辑就一团糟了。CSS不符合编码最佳实践，它的代码逻辑常常阻碍了设计和开发过程。

值得庆幸的是， CSS预处理器为我们提供很多理想的功能。有许多不同的CSS预处理器的，最流行是SASS和LESS。他们有两个不同点，但不是密切关注特定预处理器之间的显著差异，我们将看看如何在一般的CSS预处理器可以改变你对CSS的编写方式。

Image byNaiara Abaroa

什么是CSS预处理器？

简单地说， CSS预处理器和单独的CSS相比，语言更丰富，功能更强大，而且它能插入到CSS中作为普通的CSS用。

正如其名称所暗示的， CSS预处理器能对一个文本文件进行处理，并输出正确的CSS。确切的说，该文本文件取依赖于单独的预处理程序，但两者SASS和LESS是CSS的一个超级集合。他们已经包含在CSS规范以及附加功能所有的东西。其中的一个主要好处是，如果你懂CSS ，你已经可以写有效LESS和SASS ，你只需要学习一些额外的技巧。

变量, Mixins, 和 函数

CSS不包括的变量。任何熟悉编码的人都了解变量的使用。变量允许Web开发人员值赋给一个变量名，然后可以在整个样式表使用。如果您需要更改该值，你只需要在一个地方改变它，而不是改所有的CSS。

Image byChris Michel

Mixins稍微复杂一些。它们允许一个类被嵌入在另一个类中，然后可以在整个样式表中使用它的属性，在大致相同的方式中作为一个变量。函数多，虽然有一些限制，但你会找到任何其他的编程语言中用的类似函数。

它会让你的CSS更简单

“不要重复自己”是现代编码的基本最佳实践之一。与单纯的CSS这几乎是不可能做到的，但SASS,LESS和其他的，变量，mixins，以及函数允许开发人员一次编写，并利用它们在其整个样式表。

CSS 预处理器将会节省你的时间

Image byMario Bieh

CSS编写和维护方式的低效率，占用了大量的开发时间。使用CSS预处理器大大简化了编写可读性和可维护性，这意味着开发人员和设计人员有更多的时间工作，去做真正重要的东西，比如使网站看起来体验更好的工作。

如果你一直在回避的CSS预处理器，也许是时候看看了。它们将节省您的时间，对于已经很熟悉CSS的人来说，学习起来也很简单。