ここの新しい男。Stylus (コンパイル済み CSS) クライアント側を使用するための優れたソリューションを探していました。
これで、コンパイルされた CSS クライアント側を使用しないことに関するヒントがわかりました。理由は次のとおりです。
ただ、私の環境はChromeとOpera向けに作った拡張機能です。JS環境で動作し、オフラインで動作するため、1.2.3のいずれにも該当しません。ここで私が本当に探しているのは、頭痛の種を減らし、変数を増やし、ネストとミックスインを増やして、より効率的に CSS を記述する方法です。
Less、Sass、および Stylus のトリオの中で唯一、現在クライアント側でうまく機能している Less を試してみました。では、Stylus の適切な解決策を知っている人はいますか?
このページにはおそらく解決策があります: http://learnboost.github.io/stylus/try.html
その場で Stylus をコンパイルしているようです。
CSS プリプロセッサは、実際にはクライアント側で実行するためのものではありません。一部のツール (LESS など) は、オンザフライでコンパイルする開発時のクライアント側 (JavaScript) コンパイラを提供します。ただし、これは本番用ではありません。
Stylus/Sass がデフォルトでこれを提供しないという事実は、実際には良いことであり、個人的には LESS が提供しないことを望みます。ただし、同時に、最初に補助輪を使用することを好む人にとって、それを使用することでドアが開かれることにも気付きます。誰もが異なる方法で学習するため、これは、特定のグループの人々を最初にドアに入れることができる機能にすぎない可能性があります. したがって、開発に関しては問題ないかもしれませんが、この記事を書いている時点では、このワークフローは本番環境で最もパフォーマンスの高いものではありません。願わくば、これらのツールの便利な機能のほとんどがネイティブ CSS に追加されることを願っています。
現時点では、コンパイルされた CSS のみをデプロイし、watch、guard、live-reload、codekit (または適切な同等のファイル ウォッチャー) などを開発時に使用して、コーディング時にスタイラス ファイルが再コンパイルされるようにすることをお勧めします。
GitHub リポジトリclientで利用可能なブランチがあります
私はあなたの質問を完全には理解していませんが、LESS を使用してコンパイルされた css で経験したことのいくつかを提供します。
以前の実装では、ブラウザーで LESS ファイルを CSS にコンパイルするために JavaScript が必要でした。
最近、アプリケーションを使用して LESS コードを有効な CSS にコンパイルしています。これにより、JS がソース コードを変換する必要がなくなります。
私が最初に使用したアプリケーションは crunch http://crunchapp.net/で、これは非常にうまく機能しましたが、オンザフライで CSS をコンパイルしませんでした。
私が現在使用しているアプリケーションは simpless http://wearekiss.com/simplessと呼ばれ、その場で有効な css が作成されるため、崇高なテキストで保存してブラウザーで更新するとすぐに、変更内容を確認できます。 CSS。
このワークフローを使用すると、上記の問題を回避できます。開発が完了したら、simpless から出力された css ファイルをアップロードするだけです。これも大幅に縮小されているため、最適化に必要な時間を節約できます。さらにcss。
申し訳ありませんが、質問を正しく理解できたことを願っています。
乾杯、ステファン