1

通常のCSSを使用する既存のDjangoプロジェクトがあります。スタイルシートは機能ごとに分割されているため、nav.css、course.css、default.css、reset.cssなどがあります。これらはすべて、htmlページから参照されるmain.cssにインポートされます。

このプロジェクトではCompassを使用して、スタイルシートを管理しやすくし、UIのスキンを簡単に作成できるようにしたいと思います。

Compassをチェックアウトする前に、Sassを調べて、すべてのスタイルシートの.scssファイルを作成しました。

今では、Sassだけでなく、Compassを使用する方がよい場合があることに気付きました。これは、Compassに付属するすべてのデフォルトスタイルを取得するためです。ただし、リファクタリングプロセスを開始する方法について少し混乱しています。

Compassを使用するために、すでにスタイルが定義されている既存のプロジェクトを(ベビーステップで)リファクタリングする正しいプロセスは何でしょうか?

4

1 に答える 1

2

リファクタリング作業の多くは、コンパスの有無にかかわらず同じであり、Sassがコンパスよりも早く提供する利点がわかります。

コンパスの作成者であるクリス・エプシュタインは、彼がdiggのCSSをリファクタリングする方法を書き留めました。総括する:

  1. パーシャルを抽出します。機能ごとに別々のスタイルシートがすでにあるので、これで順調に進んでいます。さらに進んで、独立したルールセットを引き出して、管理を容易にし、リファクタリングプロジェクトをより小さなステップに分割します。

  2. スタイルを分析します。新しいパーシャルで繰り返しパターンと継承関係を探します。セレクターの複製がある場合は、次のステップを開始するのに適した場所になる可能性があります。

  3. 基本クラスを抽出します。これは、CSSをで乾かす場所です@extend。重複した宣言を基本クラスに引き出して拡張します。

  4. ネスティングを適用します。 ネストは、スタイルシートを読みやすくするための優れたSass機能です。

  5. Mixinを抽出します。手順2で一般的なスタイリングパターンを見つけた場合は、今がそれらをミックスインに抽出するときです。

これで、コンパスとその再利用可能なパターンを実際に利用できるようになります。コンパスのドキュメントに精通していると、どのミックスインがプロジェクトに適用できるかを特定するのに役立ちます。

于 2012-07-20T21:32:29.770 に答える