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

Question

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

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

- fateme

---

请点击这里查看：http://graphicdesign.stackexchange.com/questions/16443/what-is-a-difference-in-css-frameworks-vs-preprocessors - G.L.P

Answer 1

从http://lesscss.org/：

Less是一种CSS预处理器，它扩展了CSS语言， 添加了许多功能和技术，如变量、mixin、函数等， 可以让您创建更易于维护、主题化和可扩展的CSS。

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

Sass是CSS的扩展，它增加了基本语言的强大和优雅。 它允许您使用变量、嵌套规则、mixin、行内导入等，且完全兼容CSS的语法。 Sass有助于保持大型样式表的组织，并快速启动小型样式表， 特别是在Compass样式库的帮助下。

基本上两者都是CSS预处理器，可以编写样式信息，最终编译为CSS。

另一方面，像bootstrap这样的框架更像是预制的样式表， 可用于节省开发时间。您可以利用预制表单，而不是反复编写相似样式的自定义表单。 它们通常包含重置、基本布局和/或网格系统等内容。

还有一些框架是使用预处理器编写和设计的，如Less Framework 4

如果您对这方面比较新，请从普通的CSS开始。预处理器可能有所帮助，但学习曲线会比较陡峭。

- apaul

---

那么，如何学习这三个东西呢？应该像这样吗：CSS -> 预处理器（例如SASS）-> 框架（例如Bootstrap）？ - Chinmay Ghule

Answer 2

如上所述，LESS和SASS可以让CSS遵循编码中的DRY（Don't Repeat Yourself）原则。例如，如果您有一个CSS文件，想让12个项目具有相同的文本颜色，比如h1、h2、h3、h4、p、a等，这些预处理器允许您创建一个变量（比如myColor），然后将其传递到每个项目的颜色属性中。
这听起来可能不太令人兴奋，但它真正发挥作用的地方是当您想重新设计网站或将该颜色更改为“天蓝色”时，而不是现在浏览那些3000行代码以查找不同的项目（如上面列出的h1、h2、...、a等）时，您只需要更改十六进制/rgb/rgba颜色代码的myColor变量即可。这将同时更改每个项目的值。
因此，实质上您只需更改一个易于找到的值，而不是许多值，这可能需要大量筛选代码。

需要翻译的内容：

需要注意的是，LESS和SASS不能被标准的互联网浏览器读取，您需要使用一个程序将您的LESS/SASS代码编译成标准的CSS（这些程序很容易找到，大多数程序如Sublime、Brackets、Atom等都内置了此功能或允许下载一个包来完成此操作）。然后，当您需要编辑代码时，只需更改LESS/SASS文件并重新编译即可。这只是LESS/SASS所能做的一小部分，但希望它可以让您了解它们的用途。程序员懒惰，复制和粘贴通常不是一个好的选择，因为这违反了DRY原则。因此，这是一个愉快的中间地带，希望以通俗易懂的方式解释清楚。

- Kevin Leegsma

Answer 3

我相信我可以通过使用jQuery（最流行的UI / UX框架）来实现与预处理器相同的结果。

然而，这取决于有多少人在一个项目上工作，可能是团队学习了SASS或LESS脚本，可能不太了解jQuery语法。他们只关注CSS效果，这可能是一个优点。

如果我使用jQuery向多个DOM元素添加.addClass()，甚至可能比预处理器在整个CSS文件中复制所需代码更有效。

- K. Jerry Alleyne