web-dev-qa-db-ja.com

LESSファイルをCSSにコンパイルする方法はありますか（すべてのブラウザーがそうする必要はありません）？

LESS を使用することを検討していますが、ブラウザのJavaScriptが無効になっていて、CSSが読み込めない（およびサイトがひどいように見える）という考えにうんざりしています。

また、変更するたびに一度「コンパイル」するだけで、すべてのブラウザがそのLessファイルを.cssに「コンパイル」するように強制することは、私のエンジニアを怒らせます。

csscss-framework
20
Clay Nichols

はい。コーディング中に開発マシンでLESSファイルをCSSに自動コンパイルするアプリを使用できます。次に、開発が完了したら、生成されたCSSファイルをサーバーにアップロードします。

17
Nick

SimpLESS -ドラッグ、ドロップ、完了を使用します。

11
Sorcy

LESSには、.lessファイルをプリコンパイルできるバイナリ（lessc）が付属しています。次のように使用します。

 $ lessc styles.less > styles.css

しかし、ほとんどの人は、lessc -wまたはlessc --watchコマンドを使用して、LESSファイルが更新されるたびにCSSスタイルシートを自動的に再コンパイルすると思います。 CSSをlesscで縮小することもできます。 lessc -w -x。

編集：明確にするために、lesscはサーバー側のインストールに付属しています（つまり、node.jsパッケージマネージャーを介してlessをインストールする場合）。ただし、 GitHubから手動でダウンロードする を使用できます。

lesscは/bin/lesscにあります。これはもちろん* nixバイナリ（Macでも動作するはずです）ですが、にはWindowsバイナリ（ lessc.exe ）があり、ドットレス、これは別のWindows LESSコンパイラです。

更新：less-watch を使用して自動的にコンパイルします。

あるいは、最近の多くの開発者は grunt のようなタスクランナーを使用して、ビルドの自動化（コンパイル、縮小、テストなど）を処理します。 grunt-contrib-watch、grunt-contrib-less、およびgrunt-contrib-livereloadを使用すると、開発ワークフローを本当に合理化できます。

例えば。 yo を使用して新しいWebプロジェクトの足場を作成すると、LESS/CSS/JS/HTMLファイルの変更を監視し、必要に応じてプロジェクトの必要な部分を再コンパイルするように事前構成されています。 grunt serveを実行するだけで、コードを手動でコンパイル（LESS/SASS/CoffeeScript）/コードの縮小/連結、または穴居人のように手動で更新することを心配せずにコーディングできます...

10
Lèse majesté

サーバー上でLESSをCSSにコンパイルするためのオプションがいくつかあります。選択するオプションは、おそらくサイトの他の部分で使用するものに依存します。

  • Node.jsを使用する場合、元の lesscss がジョブを実行します。
  • PHPを使用する場合、 lessphp 。 PHPから変数を渡すことに関しては、多少ごみのAPIがありますが、仕事はします。
  • Rubyを使用している場合、 SASS はLESSではありませんが、SASS（個人プロジェクト）からLESS（PHPプロジェクトを職場で使用）に切り替えたときと同様です。ファイル拡張子以外の違いに気づきませんでした。便利なミックスインのライブラリもあります- COMPASS 。私はLESSでそれらを使用しようとしませんでしたが、私は彼らが動作すると期待しています。 （どうやらLESSは元々Rubyだったので、おそらくどこかに古いコンパイラが漂っています）。
  • ASP.Netを使用する場合、 。less があります。私はこれを使用していませんので、それがどれだけうまく機能するかわかりません。
  • Javaを使用する場合、 lesscss4j は、元のLESSおよびJava 6の組み込みRhinoスクリプト環境でコンパイルを終了します。
  • Perlを使用する場合、CPANに LESSp モジュールがあります。
6
Peter Taylor