LESS CSSチュートリアルスリックメニューナビゲーションバーのデザイン
Webデザインと開発の世界は本当に急速に進化しています。 Webデザイナーや開発者としての日々の仕事をより効果的かつ効率的にするのに役立つアプリや新しいフレームワークなど、コミュニティで（ほぼ）毎日公開されている多数の新しい機能でこれを確認できます。.
今日のWebデザインの進化から私の注意を引いたものはLESS、変数、ミックスイン、関数と操作のようないくつかのプログラミング概念を組み合わせることによってCSSシンタックスを書く方法を拡張するプログラム可能なスタイルシート言語です。.
それはCSSシンタックスを書くことで新しい機能を開きます。たとえば、プログラムで行うのと同じようにCSSでMixinを適用することで、可能なときはいつでもファイル全体に適用できるデフォルトのスタイルと値を格納できます。これで、同じスタイルを何度も書く必要がなくなります。.
それでは、LESSが提供するものについてのより良い洞察を得るために、LESSを使っていくつかの練習をしましょう。.
LESSでデザインする
このチュートリアルでは、Apple.comのものからヒントを得た滑らかなメニューナビゲーションバーをデザインしようとします。それはオリジナルの製品に「触発」されているだけなので、私たちの最終的なチュートリアル製品はオリジナルのものと正確に同じではないことに注意してください。.
まず始めに、まず以下の役に立つリソースを読んでください。これらはLESS言語のいくつかの基本的な実装を説明します。これは、このチュートリアルをさらに深く掘り下げる前に役立つでしょう。.
- LESS is More：LESSを使用してCSSコーディングを容易にする
- 少ないCSSでより良いCSSを書く
- LESSの紹介とSassとの比較
準備
まず最初に、この小さなプロジェクトに必要なものがいくつかあります。
1.テキストエディタ
ナビゲーションメニューをコーディングするためのテキストエディタが必要になります。しかし、今日の市場で入手可能なテキストエディタ（Dreamweaver、Notepad ++、InType、Sublime Text 2など）のほとんどはまだサポートされていません。 .もっと少なく デフォルトでファイル拡張子が設定されているため、構文が強調表示されない場合があります。.
そのため、このチュートリアルでは、LESS用にChrunchAppという特別なテキストエディタを使用します。開いて編集できます .もっと少なく 拡張ファイルを作成し、このアプリケーションを使用して静的CSSにコンパイルします。これはAdobe Airアプリケーションなので、あらゆる主要デスクトップOS（Win、OSX、およびLinux）にインストールできます。.
HTMLエディタの場合は、すでに慣れ親しんでいる任意のエディタを使用できます。私は個人的にSublime Text 2が好きです.
2. Less.js
次に、公式WebサイトからLESS JavaScript Libraryをダウンロードします。現在のバージョンは1.2.1です。このためにあなたの練習用フォルダの中に置いてください.
その後、ファイルをHTML文書にリンクします.
3.プレフィックスフリー
また、ナビゲーションメニューでベンダープレフィックスを含むいくつかの効果を達成するために、いくつかのCSS3機能を利用します（-モズ-, -○-, -ウェブキット-）異なるブラウザ間で正しく表示されるようにするためです。しかし、私は個人的にはCSSファイルを肥大化させるので接頭辞の使用を好みません.
このため、Lea Verouによって作成され、バックグラウンドで自動的にベンダーのプレフィックスを処理するJavaScriptライブラリであるprefix-freeを使用することにしました。だから私たちはW3Cから公式の構文を書く必要があるだけです.
ファイルをダウンロードしてHTMLファイルにリンクします.
すべての権利、私たちはすべて設定されています。それではHTMLマークアップの構築を始めましょう.
HTMLマークアップ
ナビゲーションはとても簡単です。 5つのメニューが順不同のリストタグで囲まれています。お気に入りのHTMLエディタを開き、次のマークアップを付けます。
レススタイリング
このセクションでは、ナビゲーションをLESS言語でスタイル設定します。プログラミングのような言語に慣れていない人にとっては、LESSでCSS構文を書くことは少し奇妙でぎこちない感じがするでしょう。でも、心配しないでください。一度慣れてしまえば、純粋なCSSを書く方法よりも確かに楽しいものになるでしょう（私の経験でも、やや中毒性があります）。.
私たちのインスピレーションの源からナビゲーションスタイルを調べましょう。.
上のスクリーンショットからわかるように、Apple.comのナビゲーションには、次の6つの主な共通スタイルがあります。
- 影
- 境界
- 仕切り
- グラデーション
- ホバー効果
- テキスト
これらのスタイルを保存して内部に保存します config.less デフォルトスタイルとして 構成 何人かのデザイナーはまたそれを名付けるかもしれません lib.css それはの略 としょうかん. このファイルを私たちの文書にリンクする.
必ずLESS JavaScriptライブラリーの前に置いてください。.
変数を使用してカラーベースを定義する
このステップでは、変数を使用してナビゲーションカラーベースを定義します。 LESSの変数は、 @ シンボル.
@テーマ：＃555。
この @テーマ 変数は私たちの標準的な色です。可能な限りあらゆる方法でそれを使用して、完璧な配色を調整し、色の構成がより一貫したものになるようにします。.
Mixinを使ってデフォルトの影のスタイルを定義する
私がLESSから愛している機能の1つはMixinsです。これは、LESSではクラスやクラスIDで継承できるいくつかの定義済みスタイルをスタイルシートに格納するというプログラミングの概念です。.
.shadow box-shadow：0 1ピクセル2ピクセル0 @テーマ。
上記のコードでは、プレフィックスのバージョンを含めていません。 ボックスシャドウ なぜなら、接頭辞のないライブラリがそれらを自動的に処理するからです。また、影の色はテーマ変数colorから継承されています。.
パラメトリックミックスインで境界線のスタイルを定義する
ナビゲーションバーは少し丸みを帯びた角を持つ明確な境界色が必要になります。パラメトリックミックスインを使ってボーダースタイルをコンパイルすることができます。それは実際にMixinsと同じ機能を持っています、唯一の違いは値がより調整可能であるようにそれがまた変更可能なパラメータを持っているということです.
.border（@radius：3px）border-radius：@radius;ボーダー：1ピクセルソリッド@テーマ - ＃050505。
上記のコードでは、デフォルトの境界線を設定しています @半径 にとって 3px 前述したように、この値は後で変更できます.
操作でグラデーション、分割線、およびホバースタイルを定義する
演算は単なるプログラミング言語であり、加算、除算、減算、乗算などの数学式を適用して目的の結果を得ることができます。次のコードを見てみましょう。
.デバイダborder-style：solid;ボーダー幅：0 1px 0 1px。 border-color：透明@テーマ - ＃111透明@テーマ+＃333。
上記のコードでは引きます @テーマ による変数 ＃111, これにより、左ボーダーカラーの出力が少し暗くなります。右側の境界線の色は、 @テーマ 16進数で可変 ＃333, 出力は明るくなります.
配色レベル
さて、数式と混同されるかもしれないあなたの何人かのために、より良い理解を得るために下のカラースキーム図を調べましょう：
最大のダークトーンは ＃000 （黒）、最大の光の色調は #fff （白）そして私達の現在のカラーベースは ＃555. カラーベースを 3 現在より暗いレベル、私達はそれを単にそれを引くことができます ＃333. 同じように色を明るくすることもできます.
次に、グラデーションカラーを操作します.
.勾配｛背景：線形勾配（上、@ theme +＃252525 0％、@ theme +＃171717 50％、@ theme - ＃010101 51％、@ theme +＃151515 100％）； 効果：背景：線形勾配（上、@テーマ - ＃010101 0％、@テーマ - ＃121212 50％、@テーマ - ＃222222 51％、@テーマ - ＃050505 100％）;。
Guard Mixinを使って文字スタイルを定義する
ナビゲーションバーには2色、濃い色と1色のライトを用意する予定です。 Guard Mixinsを使用して、テキストに2つの条件付きステートメントを適用します。.
まず、テキストの明度が50％以上の色を指定すると、 テキスト影 この場合色は暗くなるはずです ＃000000.
.textcolor（@txtcolor）のとき（lightness（@txtcolor）> = 50％）color：@txtcolor; text-shadow：1px 1px 0px＃000000;
次に、テキストに明度が50％未満の色を付けると、 テキスト影 白くなります.
.textcolor（@txtcolor）when（明度（@txtcolor）LESSのインポート
もう一つ作成しましょう
.もっと少なくファイル名styles.lessインポートconfig.lessその中に：@import "config.less";フォントファミリを追加
ナビゲーションバーがより魅力的に見えるようにするために、以下を使用して新しいフォントファミリを含めます。
@フォントフェイスルール。驚くほど,@フォントフェイスルールはIE6以降すでに実際にサポートされています!今回はAsapフォントを使います。 Font Squirrelのフォントフェイスコレクションからダウンロードしてください。それから最近作成したものに以下のスタイルを挿入します。
styles.lessファイル.@ font-face font-family： 'AsapRegular'; src：url（ 'fonts / Asap-Regular-webfont.eot'）; src：url（ 'fonts / Asap-Regular-webfont.eot？#iefix'）形式（ 'embedded-opentype'）、url（ 'fonts / Asap-Regular-webfont.woff'）形式（ 'woff'）、url （ 'フォント/ Asap-Regular-webfont.ttf'）フォーマット（ 'truetype'）、url（ 'フォント/ Asap-Regular-webfont.svg＃AsapRegular'）フォーマット（ 'svg'）;フォントの太さ：普通。フォントスタイル：普通。カラー機能で体をスタイリングする
それでは、背景色を
体フォントファミリーとフォントサイズを指定するだけでなく（カラーベースよりも明るくなるはずです）。色関数を使って効果に近づけることができます。次のコードは、背景を30％に明るくします。.
ボディー背景：明るくする（@ theme、30％）; font-family：AsapRegular、sans-serif。フォントサイズ：11pt。
ネストしたルールでナビゲーションをスタイリングする
LESSでは、親の直下にスタイルをネストすることができます。以下のコードを見てみましょう.
の
ナビナビゲーションに必要なすべての要素を含むタグには、次のスタイルが与えられます。.nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 。境界; 。影;CSSルールをもう一度追加するのではなく、挿入しただけです。
.境界ボーダースタイルを.影影を付けます。実際の場合、これらのクラスのセットは、必要に応じて他の要素でも再利用できます。.
次に、
ulの中ナビゼロの余白と余白を持ちます。それほど前ではないが、私たちはこのようなものを書くことによってスタイルに近づくであろう：nav … nav ul …このアプローチには何の問題もありません。実際、毎回それを実行していたので、かなり快適です。しかし、この方法は、多くのCSS設計者が言っていますが、冗長であり、場合によっては簡単に管理できません。.
これで、次のようなことができます。
nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 。境界; 。影; ul パディング：0;マージン：0。
そして、メニューは次のように並べて表示されます。
表示：インライン財産.nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 。境界; 。影; ul パディング：0;マージン：0。 li display：inline;
以下の構文では、メニューのアンカータグのスタイルを指定し、定義済みのスタイルを追加しています。
.テキストの色,.仕切り,.勾配.nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 。境界; 。影; ul パディング：0;マージン：0。 li display：inline; テキスト装飾：なし。表示：インラインブロック。フロート：左。幅：156ピクセル。高さ：45ピクセル。 text-align：center。行の高さ：300％。 .textcolor（＃f2f2f2）; //この行を変更することができます。 。勾配;上記のコードでは、16進数を適用しています
＃f2f2f2明度が50％を超えると見なされるので、影は自動的に暗くなります。私が確信しているコードの残りの部分はかなり自明です。.
ただし、上記の現在の結果を見ると、各メニューに仕切りがあるため、最後のセクションが下にオーバーフローしています。そのため、ナビゲーションバーの最初と最後の子の境界線スタイルを省略する必要があります。.
nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 。境界; 。影; ul パディング：0;マージン：0。 li display：inline; テキスト装飾：なし。表示：インラインブロック。フロート：左。幅：156ピクセル。高さ：45ピクセル。 text-align：center。行の高さ：300％。 .textcolor（＃f2f2f2）; //この行を変更することができます。 。勾配; li：最初の子a border-left：なし; li：最後の子border-right：none;
ホバー状態
最後のステップでは、ホバー効果を追加します。 LESSでは追加できます
疑似要素といったホバー使う＆シンボル.nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 。境界; 。影; ul パディング：0;マージン：0。 li display：inline; テキスト装飾：なし。表示：インラインブロック。フロート：左。幅：156ピクセル。高さ：45ピクセル。 text-align：center。行の高さ：300％。 .textcolor（＃f2f2f2）; //この行を変更することができます。 。勾配; ＆：hover .hovereffect; li：最初の子a border-left：なし;; li：最後の子border-right：none;
色のテーマを変更する
これがLESSのクールな部分です。カラーテーマ全体を変更したい場合は、純粋なCSSで必要なものよりも少ない行数変更で変更できます。.
この場合は、ナビゲーションカラーを少し明るくするように変更します。次の2行を変更するだけです.
@テーマ：#ccc; //これを変更.textcolor（＃555）; //このそしてこれが結果です.
LESSをCSSにコンパイル
まだLESS JavaScriptを使用している場合は、
.もっと少なく標準のブラウザで解釈できるように、ファイルに変換して静的CSSに変換します。これはクライアント側では二重の仕事であり、冗長なことは言うまでもなく、帯域幅を浪費します。 LESSの主なポイントは、静的CSSをコンパイルしてより動的でプログラム可能にするという私たちの慣行を単純化するワークフローにあります。.そのため、ナビゲーションバーをWebサイトで公開するときは、LESSファイルを静的CSSにコンパイルすることが重要です。.
クリック それをクランチ! 大きなボタン.
.lessを私たちの練習ファイルに保存し、それをHTML文書にリンクさせ、そしてリンクを解除してください。
.もっと少なく＆less.js文書からのファイル..shadow box-shadow：0 1ピクセル2ピクセル0＃555555; 国境スタイル：固体;。ボーダー幅：0 1px 0 1px。ボーダーカラー：透明＃444444透明＃888888。 .gradient 背景：線形勾配（上、＃7a7a7a 0％、＃6c6c6c 50％、＃545454 51％、＃6a6a6a 100％）;。 背景：線形グラデーション（上、＃545454 0％、＃434343 50％、＃333333 51％、＃505050 100％）;。 @ font-face font-family： 'AsapRegular'; src：url（ 'fonts / Asap-Regular-webfont.eot'）; src：url（ 'fonts / Asap-Regular-webfont.eot？#iefix'）形式（ 'embedded-opentype'）、url（ 'fonts / Asap-Regular-webfont.woff'）形式（ 'woff'）、url （ 'フォント/ Asap-Regular-webfont.ttf'）フォーマット（ 'truetype'）、url（ 'フォント/ Asap-Regular-webfont.svg＃AsapRegular'）フォーマット（ 'svg'）;フォントの太さ：普通。フォントスタイル：普通。 body background：＃a2a2a2; font-family：AsapRegular、sans-serif。フォントサイズ：11pt。 nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 border-radius：3ピクセル。ボーダー：1ピクセルソリッド＃505050。ボックスシャドウ：0 1px 2px 0＃555555; nav ul パディング：0;マージン：0。 nav ul li display：inline;; テキスト装飾：なし;表示：インラインブロック。フロート：左。幅：156ピクセル。高さ：45ピクセル。 text-align：center。行の高さ：300％。色：＃f2f2f2; text-shadow：1px 1px 0px＃000000;ボーダースタイル：ソリッド。ボーダー幅：0 1px 0 1px。ボーダーカラー：透明＃444444透明＃888888。背景：線形勾配（上、＃7a7a7a 0％、＃6c6c6c 50％、＃545454 51％、＃6a6a6a 100％）。 a：ホバー背景：線形勾配（上、＃545454 0％、＃434343 50％、＃333333 51％、＃505050 100％）; nav ul li：最初の子a border-left：なし; nav ul li：最後の子border-right：none;もう一度結果を見てみましょう.
そして、これで終わりです。試してみてください。.
結論
私たちは今日、LESS言語について多くのことを学びました。
- 変数.
- ミックスイン
- パラメトリックミックスイン
- オペレーション
- 保護されたミックスイン
- そして入れ子になった規則
さらにカバーすることができる多くの事柄と示され説明されるべき多くの可能性がありますが、私達はあなたがこの基本的なチュートリアルを楽しんだことを願っています.
- デモ
- ソースをダウンロード
