コンピューター, プログラミング
プリプロセッサCSS：概要、選択、アプリケーション
絶対にすべての経験豊富なWebデザイナーは、プリプロセッサを使用しています。 例外はありません。 あなたはこの活動で成功したい場合は、これらのプログラムを忘れないでください。 一見すると、彼らは初心者の静かな恐怖を引き起こす可能性 - それはプログラミングにあまりにも似ています！ 実際には、数時間、その後、あなたはおよそ一日のためにCSSプリプロセッサのすべての機能を扱うことができ、あなたがしようとした場合。 将来的には、彼らは大幅にあなたの人生を簡素化します。
どのようにCSSプリプロセッサをしました
よりよいこの技術の特性を理解するために、簡単にWebページの視覚的なプレゼンテーションの歴史を掘り下げます。
だけちょうどインターネットの大規模な使用を開始すると、何のスタイルシートが存在しませんでした。 ドキュメントの実行は、ブラウザに完全に依存していました。 それらのそれぞれは、特定のタグの治療に用いられてきた独自のスタイルを持っていました。 したがって、ページがブラウザは、あなたがそれらを開く順序に応じて異なって見えます。 結果 - 混沌、混乱、開発者のための問題。
1994年、ノルウェーの科学者ホーコンリーは、HTML文書とは別に、ページの外観を使用することができるスタイルシートを開発しました。 すぐに完了するために着手したW3Cのアイデアpriglanulasメンバー。 数年後、彼はCSS仕様の最初のバージョンを発表しました。 それから彼女は常に確定され、改善された...しかし、コンセプトは、すべて同じであった：それぞれのスタイルには、特定のプロパティを設定します。
CSSのテーブルを使用することで、常に問題となっていました。 たとえば、Webデザイナーは、多くの場合、機能の並べ替えやグループ化に問題があったが、継承はそれほど単純ではありません。
そして、第二千が来ました。 マーキングはますます柔軟で動的なワークスタイルにすることが重要であるプロのフロントエンドの開発者、に従事し始めています。 時間要求CSSプレフィックスの配置で存在し、サポートブラウザの新機能を追跡します。 その後は、JavaScriptによって、およびRubyの専門家は、プリプロセッサを作成し、ダウンビジネスになった - CSSの上部構造を、新しい機能が追加されています。
初心者のためのCSS：プリプロセッサの機能
彼らはいくつかの機能を持っています：
- ブラウザプレフィックスとカーキ色を統一します。
- 構文を簡素化します。
- エラーなしでネストされたセレクタと仕事をする機会を与えます。
- ロジックスタイリングを向上させます。
要するに：プリプロセッサは、CSSプログラミング・ロジック機能を追加します。 変数、関数、メクラウナギ、サイクル条件：さて、スタイリングは、スタイルの通常のリストにし、いくつかの簡単なテクニックやアプローチで実行されていません。 また、数学を使用する機能。
これらのアドインの人気を見て、W3Cは徐々にCSSのコードでそれらの可能性を追加するために始めています。 例えば、明細書中の多くのブラウザによってサポートされているがCALC（）関数、そう。 すぐに変数を設定し、メクラウナギを作成することが可能であることが期待されます。 しかし、これは遠い未来に起こる、とプリプロセッサすでにこことすでによく動作します。
人気のプリプロセッサのCSS。 サス
2007年に設計されています。 もともとコンポーネントHAML - テンプレートのHTML。 CSS要素のための新機能にはどこにでもそれを普及し始めたのRuby on Rails、上ご賞味開発者を制御します。 サス今任意プリプロセッサに含まれている機能の膨大な数：変数、セレクタの埋め込み、メクラウナギ（その後、但し、これらの引数を追加することはできません）。
サスでの宣言の変数
$記号で宣言された変数。 彼らは、例えば、その性質やセットを維持することができます：「$ borderSolid：1pxの赤く;」。 この例では、我々はborderSolidという変数を宣言し、それが1pxの赤色の固体を大切に保存しました。 今、私たちは1ピクセルの赤の境界線の幅を作成する必要がCSSであれば、単純にプロパティ名の後にその変数を示します。 変数の発表後に変更することはできません。 いくつかの組み込み関数があります。 例えば、$ redcolor＃FF5050の値を持つ変数を宣言します。 P {色：今、任意の要素の特性のCSSコードで、フォントの色を設定するために使用$ redColorと、 }。 あなたは色を試してみたいのですか？ 暗くまたは明るく機能を使用してください。 これはそうしている：P {色：（$ redColor、20％）を暗くします。 }。 結果として、カラーredColor 20％軽量であろう。
サス多くの組み込み関数。 価値は少なくともそれらを読んで、より良い - 学びます。
ネスティング
以前は、ネストを示すためには、長いと不快なデザインを使用する必要がありました。 我々がpであるdiv要素を、持っていることを想像し、その中に、順番に、スパンを設定します。 黄色、スパンのために - - ピンクのdivのために、我々は、pのフォント色の赤を、設定する必要があります。 次のように典型的なCSSでそれが行われることになります。
DIV {
色：赤;
}
divのp {
色：黄色;
}
divのpスパン{
色：ピンク;
}
CSSプリプロセッサでは、すべてがより簡単に、よりコンパクトになりました：
DIV {
色：赤;
P {
色：黄色;
.span {
色：ピンク;
}
}
}
要素は、文字通り、互いを「投資しました」。
プリプロセッサディレクティブ
@importディレクティブを使用すると、ファイルをインポートすることができます。 たとえば、私たちは、フォントのスタイルを宣言するfonts.sassファイルを持っています。 メインファイルstyle.sassに接続してください：@import「フォント」。 やりました！ 代わりに、私たちが必要とされる特性にすばやく簡単にアクセスするために使用できるいくつかを持っているスタイルを持つ単一の大きなファイルの。
メクラウナギ
最も興味深いアイデアの一つ。 これは、1本のラインは、プロパティのセットを頼むことができます。 次のように動作します。
@mixin largeFont {
フォントファミリ： 'のTimes New Roman';
フォントサイズ：64px;
行の高さ：80px;
フォント重量：太字;
}
ディレクティブの@includeを使用し、ページ上の要素に適用するメクラウナギ。 例えば、我々はH1ヘッダにそれを適用したいです。 h1と{@include：私たちは、以下の構造を有するlargeFontを。 }
メクラウナギのすべてのプロパティは、H1要素が割り当てられています。
プリプロセッサ少ないです
構文サスは、プログラミングを思い出します。 あなたはCSSを勉強初心者のためのより適切なオプションを探しているなら、あまりを探します。 これは、2009年に作成されました。 主な特徴 - CSSネイティブ構文のサポート、プログラミングImposerを持つので、なじみのない、学ぶことが容易になります。
変数は、@記号を使用して宣言されています。 たとえば、次のように@fontSize：14px;。 Sassの中と同じ原理にネスト作品。 次のようにメクラウナギが発表されています.largeFont（）{フォントファミリ： 'のTimes New Roman'; フォントサイズ：64px; 行の高さ：80px; フォント重量：太字; }。 ただ、選択した要素のプロパティで、新しく作成されたメクラウナギを追加する - それを接続するにはプリプロセッサディレクティブを使用する必要はありません。 例えば：H1 {.largeFont。 }。
スタイラス
別のプリプロセッサ。 世界ジェイド、Expressおよび他の有用な製品を与えた同じ著者によって2011年に作成されました。
変数は、2つの方法で宣言することができます - 明示的または暗黙的。 たとえば、次のようにフォント= 'のTimes New Roman'; - 暗黙のオプション。 しかし、$フォント= 'のTimes New Roman' - 明らか。 メクラウナギが宣言され、暗黙的に接続されています。 構文は次のとおりである：redColor（）色の赤。 今、私たちは、たとえば、項目を追加することができます：H1 redColorを（）;。
一見上のスタイラスは、それが不可解に見えるかもしれません。 「ネイティブ」括弧やセミコロンはどこですか？ しかし、それは、それに突入する必要があり、すべてがより明確になります。 このプリプロセッサの長期的な発展は、あなたは、古典的なCSSの構文を使用し、「離乳」できること、しかし、覚えておいてください。 「純粋な」スタイルで動作するようになるとき、これは時々問題を引き起こします。
何プリプロセッサ選ぶのか？
実際には、それは...それは問題ではありません。 すべてのバージョンは、それぞれのちょうど構文が異なる同じ機能について提供します。 私たちは、次のように操作することをお勧めします：
- ;プログラマとの両方のコードでのスタイルで仕事をしたい、サスを使用する - あなたの場合
- あなたの場合 - コーダーと従来のレイアウトと同じようなスタイルで仕事をしたい、それ以下に注意を払います。
- あなたはミニマリズムを好きなら、スタイラスを使用しています。
さらに開発を簡素化することができ、興味深いライブラリの無限の数のすべての変形のために。 多くの組み込みの機能を備えた強力なツール - ユーザーサスはコンパスに注意を払うことをお勧め。 たとえば、あなたがそれをインストールした後は、ベンダーのバージョンのプレフィックスを心配する必要はありません。 簡素化は、グリッドで動作します。 花、スプライトを操作するためのツールがあります。 範囲はすでにメクラウナギを発表しました。 このツールに数日を与える - ので、あなたが将来的に多くの時間と労力を節約します。
Similar articles
Trending Now