12

Railsプロジェクトでhaml(+ sass)を使用した経験があります。私は最近、blueprintcssでそれらを使い始めました-私がした唯一のことは、blueprint.cssをsassファイルに変換し、そこからコーディングを開始することでした。私は、これらすべてをデフォルトで含むRailsジェネレーターさえ持っています。

コンパスは私がしていることや他のことをしているようです。私はそれらの他のものが何であるかを理解しようとしています-しかし、ドキュメント/チュートリアルはあまり明確ではありませんでした。

これらは私の結論です:

  • Compassには、アイコン付きのリンクや水平リストなど、一般的なCSSイディオムを実装するsassミックスインが組み込まれています。私のソリューションはそのようなものを提供しません。(コンパスの場合は1ポイント)。
  • Compassにはいくつかのコマンドラインオプションがあります。Railsプロジェクトを作成できますが、既存のRailsプロジェクトに「インストール」することもできます。Railsジェネレーターは、同じことを行うようにパーソナライズすることができます。(タイ)。
  • コンパスには、ブループリントを操作する2つのモードがあります。「基本」と「セマンティック」の使用法です。それらの違いについてはよくわかりません。Railsジェネレーターでは、モードは1つしかありませんが、それで十分なようです。(タイ)
  • どうやら、コンパスは青写真(例えばYUI)以外の他のフレームワークを使用する準備ができています。私はこれについて多くのドキュメントを見つけることができませんでした、そして私はとにかくそれに興味がありません-青写真は私にとって大丈夫です(ネクタイ)。
  • コンパスの学習曲線は少し硬く、ドキュメントはまばらに見えます。学習は少し難しいかもしれません。一方、私は自分のシステムの詳細を知っており、すぐに使用できます。(私のシステムでは1ポイント)。

この分析で、私はCompassを試してみるのをためらっています。

私の分析は正しいですか?重要なポイントが欠けていますか、それともこれらのポイントのいずれかを間違って評価しましたか?

4

4 に答える 4

25

理想的な目標は、スタイルとコンテンツの分離です。常に100%可能であるとは限りませんが、セマンティックマークアップを使用することでかなりうまく実行できます。ブループリントやその他のCSSフレームワークは、これで完全に失敗します。

Compassの背後にある元々のアイデアは、Blueprintが生成する視覚的なマークアップでHTMLを汚染しないようにすることでした。マークアップを記述している場合は、代わりにそこにclass="column-4"配置することをお勧めします。style="width:160px"意味的には、それは同じ意味であり、維持するのと同じ量の繰り返しです。

Compassは、Blueprintクラス.column-4を、意味のあるセレクターに適用できるミックスインに変換します。

#sidebar
  +column(4)

このように、多くのテンプレートやHTMLファイル間ではなく、スタイルシートで維持するだけで済みます。

コンパスはプロジェクトに対応しています。を実行すると、保存時に自動的に、スタイルシートのツリー全体のコンパイルを処理しますcompass watch

コンパスによって提供されるいくつかの非常に便利な機能があります。次に例を示します。

image_urlは、相対パスまたは絶対パスを処理したり、必要に応じてローテーションアセットホストを設定したりできる構成可能な関数です。

CSS3モジュールは、丸みを帯びた角や影などのブラウザ固有のスタイルルールをすべて処理します。

一般的なユーティリティは、常に行う作業のヘルパーを提供しますが、繰り返しは少なくなります(特に、クロスブラウザーの問題の場合)。これらは私がよく使ういくつかの基本的なものです:

  • +clearfixおよび+pie-clearfix(クロスブラウザーのクリア方法)
  • + floatは、IEの前にあるdisplay:inlineを忘れないようにします...(古いIEを削除するときが来たら、それは1つの変更です)。
  • + replace-textはテキストを非表示にし、画像置換の背景を配置します。
  • + hover-linkは、ベースリンクスタイルに:hoverアンダースコアルールを追加します

これらは、Compassの新しいドキュメントサイトで確認できます。

次に、Compassは、組み込みのブループリントに加えて、他の多くのスタイルフレームワークの機能を提供します。たとえば、CSSポートだけでなく、SassネイティブのレイアウトフレームワークであるSusyをチェックしてください。柔軟で流動的なグリッドを専門としています。

于 2010-06-20T12:28:38.903 に答える
5

「セマンティックモード」とは、cssフレームワークに付属しているものよりも多くのセマンティッククラス名を使用する可能性を指します:.articlevs.grid_1。個人的には大きな+だと思います。

于 2010-05-25T12:52:14.563 に答える
2

これらのリソースが最近表示されたばかりかどうかはわかりませんが、Compass CSS3ヘルパー一般ユーティリティ(どちらも私の意見では十分に文書化されています)を見たことがありますか?

もう1つの優れたリソースは、Compassプラグインページです。

個人的には、これらのユーティリティSassファイルをrubygemからコピーし、プロジェクトから保存されているSassを参照するのはかなり奇妙に感じるので、プロジェクトのSassファイルに手動で含めるのが好きです。

于 2010-06-15T06:59:30.533 に答える
0

Compassは私にとっても優れたソリューションのように見えましたが、プロジェクトで試してみたところ、Compassを使用することの大きな利点はあまりわかりませんでした。あなたのように、私は青写真で大丈夫です、そして私はhaml/sassの上にさらに別のレイヤーを追加する必要性を見ませんでした。

私は最終的にそのプロジェクトからコンパスを取り除き、ブループリントCSSファイルのsassバージョンを使用してそこから移動します。カスタム/追加のスタイルを別のsassファイルに保存します。それだけです。シンプルにしたいだけなら、コンパスなどは必要ありません。

于 2010-05-25T12:59:04.177 に答える