CSS框架和预处理器有什么区别？

Question

我知道Bootstrap和Foundation是CSS框架，但我不确定LESS和SASS是CSS框架还是预处理器。

CSS框架和预处理器之间有什么区别？

Answer 1

来自http://lesscss.org/：

  

Less是一个CSS预处理器，意味着它扩展了CSS语言，   添加允许变量，混合，函数和许多其他功能   允许您制作更易于维护的CSS的技术，   可扩展的。

来自http://sass-lang.com/documentation/file.SASS_REFERENCE.html

  

Sass是CSS的扩展，它为基本功能增添了力量和优雅   语言。它允许您使用变量，嵌套规则，mixins，内联   导入等等，都具有完全CSS兼容的语法。萨斯帮忙   保持大型样式表组织良好，并获得小样式表   并且快速奔跑，特别是在指南针风格的帮助下   库。

基本上两者都是css预处理器，因为它们允许你编写后来编译成css的样式信息。

另一方面，像bootstrap这样的框架更像是可以用来节省开发时间的预制样式表。您可以使用预制纸张，而不是一遍又一遍地写出具有相似样式的自定义纸张。它们通常具有内置的重置，基本布局和/或网格系统等功能。

还有一些框架编写，旨在与Less Framework 4

之类的前处理器一起使用

如果您对这些东西比较新，我建议从普通的旧CSS开始。预处理器可能会有所帮助，但学习曲线有点陡峭。

Answer 2

如上所述，LESS和SASS允许CSS遵循DRY（不要重复自己）编码原则。例如，如果你有一个CSS文件，你想要12个项目让我们说; h1，h2，h3，h4，p，a等都具有相同颜色的文本（比方说鲑鱼色），这些预处理器允许你做的是创建一个变量（假设 myColor ），然后您可以传递到每个项目的颜色属性    这可能听起来并不令人兴奋，但它真正闪耀的地方是当你想重新设计网站或改变颜色来说“天蓝色”而不是现在浏览这些3000行代码来找到那些不同的项目时（h1，h2） ，...，a等，如上所列）你只需要将 myColor 变量从hex / rgb / rgba颜色代码更改为天空颜色代码蓝色。这反过来会改变每个项目的价值。
   所以基本上你需要改变一个容易找到的值，而不是很多，这可能需要大量筛选代码。

要注意，标准的互联网浏览器无法读取LESS和SASS，而是必须使用将LESS / SASS代码编译成标准CSS的程序（这些程序很容易找到，大多数程序如Sublime，Brackets ，Atom等具有内置的功能或允许下载包来执行此操作。）    然后，当您需要编辑代码时，更改LESS / SASS文件并重新编译。
   这只是LESS / SASS可以做的事情的一小部分，但是它可以让你对他们的使用有所了解。程序员很懒，复制和粘贴通常不是一个好的选择，因为你违反了DRY原则。所以这是一个幸福的媒介，希望用非专业人士的术语来解释。

Answer 3

我不得不相信我可以使用jQuery（最流行的ui / ux框架）完成与预处理器相同的结果。

但是，根据在一个项目上工作的人数，可能会出现在SASS或LESS脚本中学习的团队，也可能不知道jQuery语法。他们只专注于CSS效果，这可能是一个加号。

如果我使用jQuery将.addClass（）添加到多个DOM元素......它可能比让预处理器在整个css文件中复制所需代码更有效。