编译css/scss的目的是啥？ [关闭]

Posted 2023-03-07

【中文标题】编译css/scss的目的是啥？ [关闭]

【英文标题】：What is the purpose of compiling css/scss? [closed]编译css/scss的目的是什么？ [关闭]

【发布时间】：2017-10-12 17:15:33

【问题描述】：

我只是想知道，为什么我们需要将 php/html 项目设置为使用编译器？为什么我们不只是 ctrl+s 它然后得到想要的结果呢？我想指出的是，使用编译器与使用基本的 ctrl+s 保存 Web 应用程序有什么区别。谢谢你。 :)

【参考方案1】：

我很困惑。题指编译CSS/SCSS，题指编译PHP/HTML。既然你用sass 标记了这个问题，我假设你想问为什么我们需要将 SASS 编译为 CSS，而不是仅仅能够将 SASS 文件包含到我们的项目中？

如果是你的问题，那是因为 SASS 本身并不总是有效的 CSS。这是一种对开发人员更友好的 CSS 编写方式，因为在 SASS 中我们可以继承样式。例如，我们可以定义一个基本的 CSS 类来设置字体大小和粗细（例如.arial-big），然后我们可以在其他设置颜色的类中继承它（例如.arial-big-red 和.arial-big-green）。我们不必在这些类中设置字体大小和粗细，因为我们可以从.arial-big 继承。基本 CSS 不支持这样做。如果您从不使用任何这些功能，并且您的 SASS 文件包含已经有效的 CSS 代码，那么您为什么还要使用 SASS？

现在这是一个非常简单的示例，它通常比这复杂得多，并且可以从 SASS 中的多个 CSS 类继承。但是就像我说的，这在常规 CSS 中是无效的，所以我们需要将 SASS 编译成浏览器能够理解的基本 CSS。

如果您想在 SASS 发生更改时自动将其编译为 CSS，这是完全可能的。 JetBrains 编辑器套件支持文件观察器，可在文件更改时自动触发命令。您可以将其设置为在 SASS 文件上按 CTRL+S 时调用编译器。如果您使用的是不同的编辑器，它们可能具有相似的功能，或者您可以使用基本的操作系统功能来做同样的事情。我不确定 Windows，但在 Linux 中，您可以使用 inotify/incron，而 OS X 有自己的文件观察器功能，您可以在文件更改时调用编译器。

编辑：补充一点，如果您在 PHP 项目中使用 SASS，当访问者尝试加载 CSS 时，有一些库可以将 SASS 即时编译为 CSS .除了使用指向预编译 CSS 文件的 <link> 标记外，您还可以使用一个指向属于该库的 PHP 文件的标记，届时它将编译 SASS 文件。 panique/php-sass 就是一个例子。

【讨论】：

好的，现在我明白了。我知道我需要使用编译器（gulp？）将我们的 SASS 编译为 CSS，以便浏览器理解它。无论如何，我在实习期间尝试过使用 gulp watch，但在此之前我不知道如何设置，这就是我现在正在探索的原因。好的。很好解释。非常感谢。