如何在共享主机上运行 SASS 或 LESS？

Posted 2023-03-06

技术标签:

【中文标题】如何在共享主机上运行 SASS 或 LESS？【英文标题】：How to run SASS or LESS on a shared host? 【发布时间】：2012-11-15 15:13:10 【问题描述】：

我想在 CSS 中使用变量，因此我正在考虑使用 SASS 或 LESS 来实现此目的。

然而，我的问题是我将在共享主机上部署项目，而不是具有命令行访问权限的专用主机。

我也不喜欢我的用户必须在他们的浏览器中使用 javascript 编译 CSS 文件的想法。（如果他们禁用了 Javascript 怎么办？）

处理这种情况的最佳方法是什么？最后我是否必须求助于普通的旧 CSS？希望不会……

【问题讨论】：

我不明白为什么部署到共享主机会阻止编译到本地CSS。安装node.js和lessc，写一个批处理文件来编译你的.less文件使用lessc，运行批处理文件作为构建脚本的一部分（或者如果你不使用手动触发它构建脚本）。 【参考方案1】：

在您的开发机器上编译 Sass 或 Less，并将编译后的缩小 CSS 推送到您的服务器。

【讨论】：

好的，感谢您的帮助。但是如果我以后想直接在服务器上编辑 SASS 怎么办？虽然这有很多票它没有回答这个问题，但 Tintin81 要求一种不必在开发服务器上编译的方法。 @Duncanmoo 他不会在开发服务器上编译。他应该在（本地）开发机器上编译。 @bookcasey 在开发服务器或开发本地主机上编译，都没有回答问题。如果您看一下我在回答中提到的项目。我将 LESS 文件上传到我的实时站点，php LESS 编译器从这些文件生成 CSS（并缓存它）。所以网站访问者只下载 CSS。【参考方案2】：

首先，CSS 预处理器是一种开发工具，可让您轻松管理 CSS 文件 - 它们不在浏览器中运行。

其次，在共享或专用主机上运行预处理器的唯一区别是您是否能够首先安装预处理器。

修改我的旧答案：某些 CSS 预处理确实可以在浏览器中运行。例如，Lesscss 将请求和编译更少的工作表到 CSS 并实时更新它们。这是一个非常宝贵的开发助手，但绝对不是你想在生产环境中做的事情。

【讨论】：

很遗憾，我不允许在我的（共享）服务器上安装任何东西。【参考方案3】：

你有矛盾。

如果您想完全控制您的网站，您应该拥有自己的服务器，无论是专用的还是虚拟的。这可以让你安装和运行任何你想要的东西。

如果不允许您在共享主机上安装和运行自定义软件，那么您将无法即时编译 SASS。您必须先编译 SASS，然后才能将代码上传到服务器。

如果您对本地编译 SASS 的必要性不满意，您可以使用像 Capistrano 或您的 IDE 之类的部署技术来自动化它。部署工具的选择很大程度上取决于您的开发和托管环境。

另一种选择是在客户端的浏览器中本地编译 LESS。见http://lesscss.org/#usage。但我不建议这样做，原因有两个：

这会使您的网站难以访问（真是讽刺！）。您不应该依赖繁重的 JS 将基本样式应用到您的网站。 SASS 比 LESS 更受青睐有几个原因，其中主要是很棒的 Compass 工具包。

【讨论】：

大家好，你们说的真的很有趣，因为我还没有找到任何关于在服务器上编译 sass 的信息......所以，我想知道操作 SASS 代码的最佳方法或最佳实践是什么? 1.在本地主机中，然后发送到服务器。 2.直接在服务器上 Sass 不应该在生产服务器上执行。在任何现代设置中，Sass 代码都会在应用程序生命周期的构建阶段编译成 CSS。通常，CI 服务器负责构建和部署。您提交代码，这会触发 CI、CI 构建和部署。在更简单的项目中，构建和部署可以在开发人员的机器上进行。无论哪种方式，生成的 CSS 都是静态的，因此可以从静态托管/CDN（例如 S3）提供服务。谢谢！我将下载项目并在本地工作【参考方案4】：

大多数共享主机不允许您将自定义 gem 安装到默认目录，因为它通常存在于用户的主文件夹之外，因此位于用户的可写目录之外。

我必须在我的共享主机（1and1 主机）上执行 -[这些说明]- 在共享主机上安装自定义 gem。您需要对共享托管服务器进行 shell 访问才能执行必要的步骤。您还需要确保更新您正在运行的命令以处理最新版本的 RubyGems（在本文发布时为 2.0.3）。

完成初始设置后，只需运行gem install sass 命令即可。然后切换到存储 CSS 文件的目录并运行 sass --watch 以开始使用 SASS 生成 CSS 文件。

【讨论】：

我喜欢这个答案并支持它，但我也标记了它，因为你现在链接的内容指向垃圾邮件...... @commonpike 感谢您告诉我！我删除了死链接，但遗憾的是找不到合适的替代品...【参考方案5】：

两个选项：

1) LESS/SASS 预处理器（推荐）

OP 没有提到可用的服务器端处理能力，这可能会缩小此处的选择范围，但您想要的是服务器端 LESS/SASS，理想情况下它还可以缩小和缓存生成的 CSS。

如果你有可用的 PHP，你可以使用 lessphp；较旧的项目是 github.com/Incenteev/lessphp，但不要使用该项目已停止的情况，而应使用 github.com/oyejorge/less.php，它有很多东西可以提供并且有很好的文档记录。

对于 SASS，有 github.com/richthegeek/phpsass

2) LESS.js SASS.js (+)

看看client side usage部分的less.js页面，简单但不是生产解决方案。

SASS JS 实现更加棘手，似乎已经进行了多次尝试，我不能保证，但这个项目看起来非常活跃：medialize/sass.js

+ 注意：这对于实时环境来说是一个糟糕的解决方案，因为浏览器必须下载完整的 LESS/SASS 文件、编译和渲染；大多数现代浏览器都可以处理它，但效率很低。仅用于您的开发环境或模型。

【讨论】：

【参考方案6】：

这可能会有所帮助 - 我出于同样的目的正在探索它 http://www.dev-metal.com/compile-sass-to-css-with-pure-php-automatically/

这是您通过网络启动的脚本，然后继续无限期运行以查找过期的 scss 文件。

更新：效果很好，但主机似乎将脚本视为失控并杀死它。所以我编辑了 php-sass-watcher.php 以注释掉循环，并添加了echo "Finished compiling " . date(DateTime::RSS);。然后在我的 Eclipse 中，我打开一个 Web 浏览器视图并在每次更改时运行 URL，类似于在命令行上运行编译器。

【讨论】：

【参考方案7】：

虽然它不是 SASS 或 LESS，但CSS-Crush 具有所有标准预处理器功能。我在自己的共享主机项目中广泛使用了它，没有任何服务器端安装。

唯一的要求是 PHP，这是任何体面的主机都提供的。

【讨论】：

【参考方案8】：

Tintin81，只需在 google 中输入 php sass/less compiler 并使用第一个结果，如 scssphp 或 lessphp

http://leafo.net/scssphp/

http://leafo.net/lessphp/

它将在旅途中将您的 scss 文件编译成 css，并具有缓存等功能。易于实现，源 scss 文件保留在项目中。它可以在线运行，也可以在您的本地环境中运行。

我不敢相信这里给出了多少愚蠢无用的答案，而不是对问题的简单答案。

【讨论】：