Clever Geek Handbook

SASSを使用した自動スタイル分割



SASSを使用し、限られた人的資源で大きなスタイルファイルを最適化する問題を解決する人々のための投稿。



与えられた：

  1. 50以上のテンプレートがある大規模なサイト。
  2. 大きなスタイルシート。
  3. このサイトは常に進化しており、バグが修正され、新しい機能が作成されています。
  4. 1つのブランチ（SVNリポジトリ）での開発および実稼働のバージョン。
  5. この経済全体を維持するために1-2人。
  6. 夢中にならず、自分自身に手を触れないようにしたいという大きな願望！




この叙事詩の終わりに興味があるなら、猫を歓迎します



先史時代



少し前に、私は3人が私の前に書いた1つの大きなプロジェクトに参加しました。 ところで、これらの人々は、独立したブロック、プリプロセッサ、およびその他の最適化について聞いたことがない「邪悪な開発者」についての恐ろしい話から来ました。 もちろん、私はそのようなものすべてを残すことはできませんでした、そして信じられないほどの熱意で私はすべてを書き直し始めました。 書き直すために、それを教えてあげます。 すべてのスタイルは複数のファイルに収集され、そのうち最大のものは合計16k行でした。 それはちょうどこれらのオーガストのstable舎をかき集めている過程で、私は問題に遭遇しました。



適度に怠zyな人として、私は自動化に日常的な操作を与えることに慣れていて、SASSを接続し、変数、ミックスイン、拡張を1つのグローバルファイルに作成することから始めました。 いつものように、他のプロジェクトでSASSを使用して、インポートを通じてすべてのスタイルのコンパイルを1つのグローバルファイルに収集しました。 それはサイトを開発するときの最良の解決策だったからです。 しかし、結局のところ、生産用ではありません。 コンパイルスタイルファイルは、圧縮せずに2.5 MBの重量があり始めました！ 個々のスタイルファイルの接続をすべてのコントローラー間で手動で切断および分散させることは私にとって選択肢ではなく、マシンが苦しむようにすべてを行う方法を考え始めました。 これはまさにあなたに紹介したい私の考えの産物です。



コンセプトは次のとおりです







スタイルをコンパイルするためのテンプレートモデル 



//   $develop: false; $production: true; ... //          $all: true; $ie9: false; ... //    $doc: false; //     $local_var: global; //      //                $holydat_var: 8march; //       @import "includes";




すべてのスタイルをインポートするグローバルファイルモデル 



 //      @import "includes/global_var"; //      @import "fonts"; @import "header"; @import "login"; @import "news"; @import "jquery.ui.all"; @import "factory"; @import "rooms"; @import "invite"; ...




個々のコントローラーのモデルファイルモデル 



 //         ""   @include style_separator("  1", ..."  N"){ //        @include sub_style_separator("  1"){ .selector{ ... } } //        @include sub_style_separator("  N"){ .selector2{ ... } } .selector3{ ... } ... }




個々のコントローラーのモデルファイルモデル 



 //       @mixin style_separator($var: false, ... $varN: false) { @if $var == $local_var or ... $varN == $local_var { @content; } } @mixin sub_style_separator($var: false, ... $varN: false) { @if $var == $local_var or ... $varN == $local_var { @content; } }




合計



その結果、時間と準備に多大な投資を必要としないシステムが得られます。 最も簡単に使用するには、SASSの知識のみが必要です。 さらに、このアプローチにより、スタイルの整理、分離、接続に多くの時間を費やす必要がなくなります。 このシステムは、1つの大きなプロジェクトでテストされていますが、その効果はすでに実証されています。 私はどんな種類でも批判してうれしいです！



PS



詰め物コーンのヒント：



More articles:


All Articles