CSS、LESS 和 SASS 的区别

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

编写网站样式表是一门艺术。由于可以操作 HTML 元素的方式多种多样，保持代码尽可能简洁至关重要，以避免出现各种奇怪的样式问题。而 LESS 和 SASS 正是为此而生的。

CSS 与 LESS 和 SASS 的区别

了解 CSS、LESS 和 SASS 之间的基本区别至关重要。LESS 和 SASS 是 CSS 代码的预处理器。它们允许你在样式表中使用变量和一些逻辑。由于你可以在样式表中编写实际代码，因此你的样式表就变成了动态的，这对于响应式设计非常有用。

仅使用 CSS，您必须将所需的样式精确地写在指定位置。CSS 文件加载后不会自动更新。您编写的代码就是最终效果。如果您想硬编码样式，当然可以。预处理器只是让这项工作更便捷。

关于预处理器

预处理器就是一个能根据你编写的代码自动生成 CSS 的程序。使用预处理器，你可以实现诸如继承选择器和 mixin 之类的功能。这些功能在普通的 CSS 中是无法实现的。

预处理器让样式表的阅读更加便捷，也更容易理解各个元素之间的关联。这样一来，维护和更新样式就变得简单多了，无需费力去查找图片向右偏移三个像素的原因。

较少的

LESS 是精简样式表 (Leaner Style Sheets) 的缩写。当需要在样式表中使用 JavaScript 时，它通常是首选。使用 LESS 与编写常规 CSS 并没有太大区别。虽然有一些小插件可以简化 CSS 的处理，但它们都很容易上手。

在 LESS 文件中，通过使用变量、mixing 甚至计算，可以轻松地复用 CSS 代码片段。如果您深入研究应用程序的样式，还可以选择编辑控制 LESS 的 JavaScript 文件。通常情况下，您不会想修改 JavaScript 文件，但了解一下也无妨。

SASS

SASS 基本上和 LESS 一样，只是它用于 Rails 应用。它的全称是 Synatactically Awesome Style Sheets（语法超棒的样式表）。你可以用 gems 安装它，具体细节我会让 Ruby/Rails 开发者来解释。简单来说，它是一个 CSS 预处理器，可以简化 CSS 的编写。

你仍然可以使用 mixin、变量以及各种高级的嵌套功能。和 LESS 一样，SASS 也完全向下兼容普通的 CSS 文件。你应该很快就能上手使用这两个预处理器。

CSS

无论使用哪种预处理器，有一点都不能忽视：那就是掌握编写真正的 CSS 的能力。在开始研究预处理器之前，你应该对 CSS 有一定的了解。即使不使用预处理器，你也应该能够让你的 Web 应用呈现出设计稿的效果。

你还应该了解如何构建 CSS 文件。这能帮助你保持 LESS 或 SASS 文件易于阅读，避免你像无头苍蝇一样在代码树中乱窜。没有什么比掌握基础知识更重要的了，而 CSS 可以说是最基础的语言之一。

希望我解释清楚了 CSS、LESS 和 SASS 的区别。它们本质上都是做同样的事情，只是实现方式略有不同。另外还有 SCSS，它是 SASS 的一个衍生版本。我之前在一个非 Ruby 项目中使用过 SCSS，但说实话，那个项目并不成功。有没有其他人也在 Ruby/Rails 之外的项目中使用过 SCSS 呢？

嘿！你应该在推特上关注我，原因你懂的：https://twitter.com/FlippedCoding