私はCSSの世界を掘り下げており、存在するすべてのものの使用法を理解するのに苦労しています。
LESS、SASS、Compass、Blueprint、HAMLなどがあります。どれを一緒に使用する必要がありますか?誰かがお互いに何が起こっているのか説明できますか?
私はCSSの世界を掘り下げており、存在するすべてのものの使用法を理解するのに苦労しています。
LESS、SASS、Compass、Blueprint、HAMLなどがあります。どれを一緒に使用する必要がありますか?誰かがお互いに何が起こっているのか説明できますか?
LESSとSASSは、サーバー側のCSS生成フレームワークです。CSSに近い構文を使用してスタイルシートを作成できますが、変数や関数などのアイテムを使用できます。これらのファイルをコンパイルすると、使用するCSSファイルが生成されます。ここで注意すべき重要なことは、SASSはRubyでのみ利用可能であるということです。
HAMLは、Rubyでのみ使用できる別のアイテムですが、CSSは実行しません。これは、実際にはERB(Ruby部分ビュー)を作成する代わりになります。
Compassは、SASSフレームワークの上に追加されたライブラリであり、もう少し多くの機能といくつかのデフォルトのクラス/スタイルを可能にします。
ブループリントは、基本的にプリセットクラスを含むCSSファイルである別のライブラリであり、複数列のレイアウトの作成などの一般的なユースケースを可能にします。
ただし、CSSを作成するためにこれらのいずれも必要ではなく、ほとんどの場合、まだ実際に調べるには十分ではありません。私はSASSの機能が大好きですが、それは実際にはすべての人に適しているわけではなく、必要以上に肥大化したCSSを作成することになります。
CSSの実験を始めたばかりの場合は、超越CSSやAndyClarkeによるハードボイルドWebデザインなどのリソースをお勧めします。Webデザイナー向けのHTML5とWebデザイナー向けのCSS3もどちらもかなり優れたリソースです。CSSを利用して正しく使用するには、HTMLマークアップとセマンティクスをよく理解することも重要です。
HAMLとSASSは連携し、HAMLはHTMLを作成するためのショートカット言語です。SASS (またはSCSS)はCSS を作成するためのショートカット言語であり、HTML/CSSの両方を「ロングハンド」で作成する方法を知っている必要があります。 HAML/SASSショートカットバージョン。
RUBYサーバーがない限り、ショートカットはDEVでのみ使用する必要があります。上記の両方の言語が「ダム」言語の「代替」であることがわかると、本当にイライラします。特に、検索する必要があるのはSASS /SCSSへの参照を見つけるための「CSSisDumb」-これは悪質なリンクベイトの策略です;)一方を他方を知らずに使用することはできません
COMPASSは、ローカル環境でのHAMLおよびSASS / SCSS(HTMLおよびCSSへの)のコンパイルを支援するRuby Gemです。開発環境では、これらの言語を介して行われた変更が「適切な」HTMLおよびCSSサーバーサイドにコンパイルされることを意味します。適切なサーバー上
LESSは、SASSと同等のJavaScriptです。サーバー側(node.js経由)またはクライアント側(jsファイルをインポートするだけ)で使用できます。作成したショートカットを使用して、有効なCSSにコンパイルします(マルチブラウザーまたはベンダー拡張機能を使用)。
BLUEPRINTは、プレーンCSSまたはショートカットで使用できるフレームワークです(免責事項:不要なクラスが追加されるため、フレームワークは好きではありません)Compass / SaSS/LESS内でBlueprintまたはYahooGridsFrameworkを使用する場合は、実装を容易にしようとするツールを非難する前に、彼らが最初に何をしているのかを理解してください-これらのツールはこれらのフレームワークを機能させませんが、本当に使用したい場合は、入力の量を減らすことができます。
私は最近LESS/SaSSとSCSSを試しました。私はそれらが好きですが、そもそもCSSの書き方を知っています。彼らに、私の生活を楽にするツールになる以上のことをしてほしくないのです。 CSSがすでに実行できるよりもCSSを「実行」しますが、CSSのネストと編成は実行できます。これは、私が本当に気に入っていることです。
何らかの理由で、これらの「言語」または「ツール」を実際に使用しないでください。これらは、マルチブラウザーまたはパラメーター化されたcssジェネレーターのショートカットとして表示されます。これは素晴らしいアイデアですが、最終的には、これらのことは、プレーンな古いCSSを使用して非常にエレガントに他の多くの方法で実現できます。
それらは、単純な古いCSSを使用する代わりになるべきではなく、それらが生成する可能性のある肥大化は、多くの場合、その可能性を防ぎます。
これらを使用しない非常に説得力のある理由は、プロジェクトに参加する開発者、あるマシンから別のマシンに移動したい開発者、または貢献するためにマシンを均質化する必要がある開発者のチームのインストール要件が大幅に上がることです。 。たとえば、タイムスタンプなどに基づいてcssを動的にコンパイルするためにruby、さまざまなpythonバージョン、またはphpスタブのインストールを要求することはすべて、物事を単純にしたいSASSのようなツールを潜在的に非常に複雑なものに変更します。
CSS3の約束により、これらのツールが促進したいと望んでいる多くのことが時代遅れになります。
SASS + Compass + Suzyの使用は、長い間、私のWeb開発ワークフローにとって最大の新鮮な空気でした。これらのツールを使用して、美しい流体/弾性/固定カスタムグリッドレイアウトをスタイリングするのは非常に高速です。私はそれらについてもっと早く知っていればいいのにと思います。
CleverCSSはPythonプログラムであり、私が知る限りSASSとほぼ同じですが、CleverCSSでは@importを実行できません。また、SASSには各CSSセレクターの後にセミコロンがなく、CSSプロパティのみがありますが、CleverCSSには両方の前にセミコロンがあります(これにより、構文的に少し劣ったIMOになります)。
この記事は、あなたがDjango/Pythonの人であるかどうかを確認するのに適しています。CleverCSSなどではなくSASSを使用することにした場合、汚れを感じることはありません。それを吸い上げてRubyをインストールし、SASS / Compassをセットアップしてフォルダーを監視し、.sassファイルの保存時にCSSを自動生成します。変更を保存したい場合は、生成されたCSSファイルをいじらないでください。それ以外の場合はすべてPythonのセットアップとの「統合」は必要ありません。