web-dev-qa-db-ja.com

共有ホストでSASSまたはLESSを実行するにはどうすればよいですか?

CSSで変数を使用したいので、 [〜#〜] sass [〜#〜] または [〜#〜のいずれかを使用することを検討しています。 ]その目的のために少ない[〜#〜]

ただし、私の問題は、プロジェクトを共有ホストにデプロイすることです。notコマンドラインアクセスを備えた専用ホストです。

また、ユーザーがJavascriptを使用してブラウザーでCSSファイルをコンパイルする必要があるという考えも好きではありません。 (Javascriptが無効になっている場合はどうなりますか?)

このような状況に対処するための最良の方法は何ですか?最終的には、単純な古いCSSに頼る必要がありますか?私はしないことを望みます...

16
Tintin81

開発マシンでSass以下をコンパイルし、コンパイルされ縮小されたCSSをサーバーにプッシュします。

14
bookcasey

あなたには矛盾があります。

サイトを完全に制御したい場合は、専用または仮想の独自のサーバーを取得する必要があります。これにより、必要なものをインストールして実行できます。

共有ホストにカスタムソフトウェアをインストールして実行することが許可されていない場合、SASSをオンザフライでコンパイルすることはできません。サーバーにコードをアップロードする前に、SASSをコンパイルする必要があります。

SASSをローカルでコンパイルする必要性に満足できない場合は、 Capistrano またはおそらくIDEのようなデプロイメント手法を使用して自動化できます。デプロイメントツールの選択は、開発環境とホスティング環境に大きく依存します。

もう1つのオプションは、クライアントのブラウザでLESSをローカルにコンパイルすることです。 http://lesscss.org/#usage を参照してください。しかし、私は2つの理由でそれをお勧めしません:

  1. これはあなたのウェブサイトにアクセスしにくくなるでしょう(なんて皮肉なことでしょう!)。あなたのウェブサイトに基本的なスタイルを適用するために重いJSに頼るべきではありません。
  2. SASSはいくつかの理由でLESSよりも好まれます。それらの主なものは素晴らしいCompassツールキットです。

まず、CSSプリプロセッサはCSSファイルの管理を容易にする開発ツールです。これらはブラウザでは実行されません。

次に、共有ホストまたは専用ホストでプリプロセッサを実行する場合の唯一の違いは、最初にプリプロセッサをインストールできるかどうかです。


私の古い答えを修正するには:いくつかのCSS前処理は実際にブラウザーで実行できます。たとえば、 Lesscss は、CSSに要求してコンパイルするシートを減らし、ライブで更新します。これは非常に貴重な開発支援ですが、実稼働環境でやりたいことではありません。

3
Hamish

ほとんどの共有ホストでは、カスタムgemをデフォルトのディレクトリにインストールすることはできません。これは、通常、カスタムgemがユーザーのホームフォルダーの外部に存在するため、ユーザーの書き込み可能なディレクトリの外部に存在するためです。

共有ホスト(1および1ホスティング)で私がしなければならなかったことは、共有ホストにカスタムgemをインストールする際に-[これらの手順]-に従うことでした。必要な手順を実行するには、共有ホスティングサーバーへのシェルアクセスが必要です。また、実行しているコマンドを更新して、最新バージョンのRubyGems(この投稿の時点では2.0.3)を処理することも忘れないでください。

初期設定が完了したら、gem install sassコマンドを実行するだけです。次に、CSSファイルを保存するディレクトリに移動し、sass --watchを実行して、SASSでCSSファイルの生成を開始します。

2
Dylan Ribb

2つのオプション:

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(+)

セクション クライアント側の使用法 のless.jsページを見てください。単純ですが、本番ソリューションではありません。

SASS JSの実装はもっとトリッキーで、何度も試みられたようです。保証することはできませんが、このプロジェクトはかなり活発に見えます: medialize/sass.js

+注:ブラウザは完全なLESS/SASSファイルをダウンロードし、コンパイルしてレンダリングする必要があるため、これはライブ環境には適したソリューションではありません。最近のほとんどのブラウザはそれを処理できますが、非常に非効率的です。開発環境またはモックアップでのみ使用してください。

1
Duncanmoo

SASSでもLESSでもありませんが、 CSS-Crush にはすべての標準的なプリプロセッサ機能があります。サーバー側にインストールせずに、共有ホスト上の自分のプロジェクトで広範囲に使用しました。

唯一の要件はPHPであり、これは適切なホストで与えられます。

1
Edgardo Jimenez

Tintin81、グーグルでphp sass/lessコンパイラを入力し、scssphpやlessphpなどの最初の結果を使用するだけです

http://leafo.net/scssphp/

http://leafo.net/lessphp/

それはあなたのscssファイルをキャッシュなどで外出先でcssにコンパイルします。実装が簡単で、ソースのscssファイルはプロジェクトに残ります。オンラインまたはローカル環境で動作します。

質問に対する単純な答えの代わりに、ここでどれだけの愚かな役に立たない答えが与えられたのか信じられません。

1

これは役立つかもしれません-私は同じ目的でそれを探求しています http://www.dev-metal.com/compile-sass-to-css-with-pure-php-automatically/

これは、Web経由で開始し、その後無期限に実行を続けて、古くなったscssファイルを探すスクリプトです。

更新:それはうまく機能しますが、ホストはスクリプトを暴走として扱い、それを殺しているようです。そこで、php-sass-watcher.phpを編集してループをコメントアウトし、echo "Finished compiling " . date(DateTime::RSS);を追加しました。次に、EclipseでWebブラウザーのビューを開き、コマンドラインでコンパイラーを実行するのと同じように、変更のたびにURLを実行します。

0
Dovev Hefetz