LESS CSS - 初心者向けガイド

CSSプリプロセッサは現在、Web開発の中心的存在となっています。それはウェブ開発者が構築することを可能にするVariables、Functions or Mixin、およびOperationのようなプログラミング特性を持つプレーンCSSを出荷します モジュール式、スケーラブル、そして管理しやすいCSSスタイル.

この記事では、最も普及しているCSSプリプロセッサの1つであり、Bootstrapなどの多数のフロントエンド・フレームワークに広く採用されているLESSについて説明します。私達はまた歩く 基本的なユーティリティ、ツール、そしてあなたがLESSであなたを稼働させるのを助けるためのセットアップ.

コンパイラ

まず始めに、コンパイラを設定する必要があります。 LESS構文は、W3C仕様に準拠しているので標準的ではありません。 CSSに似た特性を継承しているにもかかわらず、ブラウザは出力を処理およびレンダリングできません。.

これがLESSコードを垣間見ることができます：

 @カラーベース：＃2d5e8b。 .class1 background-color：@ color-base; .class2 背景色：#fff;色：@カラーベース。

コンパイラはコードを処理し、LESS構文をブラウザ準拠のCSS形式に変換します。

 .class1 背景色：＃2d5e8b;  .class1 .class2 background-color：#fff;カラー：＃2d5e8b。

CSSをコンパイルするためのツールはたくさんあります。

JavaScriptを使う

LESSには less.js あなたのウェブサイトに配置するのが本当に簡単であるファイル。でスタイルシートを作成する .もっと少なく 拡張子を使用してドキュメント内でリンクします。 rel = "スタイルシート/少ない" 属性.

ここでJSファイルを入手し、Bower package managerを介してダウンロードし、そうでなければCDNに直接リンクすることができます。

あなたはすべて設定されていて、その中にスタイルを作成できます。 .もっと少なく. ページがロードされると、LESS構文はその場でコンパイルされます。それを念頭に置いて JavaScriptを使用することはWebサイトのパフォーマンスに悪影響を与えるため、制作段階ではお勧めできません。.

あなたは常にLESS構文をあらかじめコンパイルしておくべきです。 通常のCSSを提供する 代わりに。あなたが使用することができます ターミナル, タスクランナー うなり声 または ガルプ, またはそれを行うためのグラフィカルアプリケーション.

CLIを使用する

LESSはネイティブのコマンドラインインターフェース（CLI）を提供します。, 教室, これは、LESS構文をコンパイルするだけでなく、いくつかのタスクを処理します。 CLIを使用して、コードをリントし、ファイルを圧縮し、そしてソースマップを作成することができます。このコマンドはNode.jsに基づいているため、Windows、OS X、およびLinuxでコマンドを効果的に機能させることができます。.

Node.jsがインストールされていることを確認し（そうでない場合はここでインストーラを入手してください）、次のコマンドラインを使用してNPM（Node Package Manager）からLESS CLIをインストールします。.

 npm install -g less

今、あなたは 教室 LESSをCSSにコンパイルするためのあなたの自由裁量での命令：

 lessc style.less style.css

Task Runnerを使用する

タスクランナーは開発タスクとワークフローを自動化するツールです。実行するのではなく 教室 コードをコンパイルするたびにcommandを実行し、タスクランナーをインストールし、LESSファイル内の変更を監視するように設定し、すぐにLESSをCSSにコンパイルします。.

今日この分野で人気のある2つのツールはGruntとGulpです。これらのツールをカバーする一連の記事があります。これらのツールをワークフローに展開する方法については、投稿をチェックしてください。.

Gruntを使用してワークフローを自動化する方法
Gulp.jsを始めよう
ビルドスクリプトの戦い：Gulp Vs Grunt

グラフィカルアプリケーションの使用

Terminalとコマンドラインを使い慣れていないかもしれない人のために、代わりにグラフィカルインタフェースを選ぶことができます。今日すべてのプラットフォーム用にLESSをコンパイルするための豊富なアプリケーションがあります - 無料、有料のものもあります

これが完全なリストです：

アプリ	プラットフォーム	コスト
混合	OS X / Windows	無料
コアラ	OS X / Windows / Linux	無料
プレプロ	OS X / Windows	フリーミアム（USD29）
WinLESS	Windows	無料
コードキット	OS X	USD32

（JavaScriptを除いて）どちらのコンパイラを選択しても問題はありませんが、率直に言って、ツールが機能しワークフローを補完するものであれば、それを試してください。.

コードエディタ

任意のコードエディタを使用できます。 LESS構文を適切な色で強調表示するプラグインまたは拡張機能をインストールするだけです。これは、SublimeText、Notepad ++、VisualStudio、TextMate、Eclipseなど、ほぼすべてのコードエディタおよびIDEで使用できる機能です。.

コンパイラとコードエディタがすべて設定できたので、LESS構文でCSSスタイルを書き始めることができます。.

LESSの構文

通常のCSSとは異なり、LESSはプログラミング言語のように機能します。動的なので、次のような用語をいくつか見つけることを期待してください。変数, 操作そして範囲途中で.

変数

まずはじめに、変数.

あなたがCSSでかなり長い間働いていたならば、あなたはたぶんこのような何かを書いたでしょう、そこで我々はスタイルシート全体の宣言ブロックに割り当てられた反復的な値を持っています.

 .class1 背景色：＃2d5e8b; .class2 background-color：#fff;カラー：＃2d5e8b。 .class3 border：1px solid＃2d5e8b;

このやり方は実際には問題ありません。 1000以上の類似のスニペット スタイルシート全体。これは大規模なWebサイトを構築するときに起こる可能性があります。作業が面倒になる.

LESSのようなCSSプリプロセッサを使っているのであれば、上の例は問題にならないでしょう。変数. 変数は私達が貯えることを可能にします定数後でスタイルシート全体で再利用できる値.

 @カラーベース：＃2d5e8b。 .class1 background-color：@ color-base; .class2 background-color：#fff;色：@カラーベース。 .class3 border：1px solid @ color-base;

上の例では、色を保存しています ＃2d5e8b の中に @カラーベース 変数。色を変えたいときは、この変数の値を変えるだけです。.

色以外にも、変数に他の値を入れることもできます。

 @フォントファミリー：ジョージア@ドットボーダー：点線@遷移：線形@不透明度：0.5

ミックスイン

LESSでは、使用できます ミックスイン CSSルールセット内の宣言全体を別のルールセットで再利用するため。これが一例です。

 .グラデーション背景：#eaeaea;背景：線形グラデーション（top、#eaeaea、#cccccc）;背景：-o-linear-gradient（top、#eaeaea、#cccccc）;背景：-ms-linear-gradient（top、#eaeaea、#cccccc）;背景：-moz-linear-gradient（top、#eaeaea、#cccccc）;背景：-webkit-linear-gradient（top、#eaeaea、#cccccc）;

上記のスニペットでは、デフォルトをプリセットしました。勾配中の色 .グラデーション クラス。グラデーションを追加したいときはいつでも、 .グラデーション こちらです：

 div .gradients;ボーダー：1ピクセルソリッド＃555。 border-radius：3ピクセル。

の .ボックス 内部のすべての宣言ブロックを継承します .グラデーション. したがって、上記のCSS規則は次のプレーンCSSと同じです。

 div background：#eaeaea;背景：線形グラデーション（top、#eaeaea、#cccccc）;背景：-o-linear-gradient（top、#eaeaea、#cccccc）;背景：-ms-linear-gradient（top、#eaeaea、#cccccc）;背景：-moz-linear-gradient（top、#eaeaea、#cccccc）;背景：-webkit-linear-gradient（top、#eaeaea、#cccccc）;ボーダー：1ピクセルソリッド＃555。 border-radius：3ピクセル。

さらに、WebサイトでCSS3を多用している場合は、LESS Elementsを使用して仕事をはるかに簡単にすることができます。 LESS Elementsは共通のコレクションです。 CSS3ミックスイン 次のようなスタイルシートでよく使うことがある ボーダー半径, グラデーション, 影を落とす 等々.

LESS Elementsを使用するには、単純に @インポート LESSスタイルシートにルールを入れますが、最初にそれをダウンロードして作業ディレクトリに追加することを忘れないでください。.

 @import "elements.less";

これですべてを再利用できます クラス から提供 elements.less, たとえば、 3px ボーダーの半径 div, 我々は書ける：

 div .rounded（3px）;

さらなる使用法については、公式文書を参照してください。.

ネストした規則

あなたがプレーンなCSSでスタイルを書くとき、あなたはまたこれらの典型的なコード構造を通して来たかもしれません.

 ナビ身長：40px;幅：100％。背景：＃455868。ボーダーボトム：2ピクセルソリッド＃283744。  nav li width：600px;高さ：40ピクセル。  nav li a color：#fff;行の高さ：40ピクセル。 text-shadow：1ピクセル1ピクセル0ピクセル＃283744;

単純なCSSでは、まずすべてのルールセットで親をターゲットにして子要素を選択します。 “ベストプラクティス” 原理.

LESS CSSでは、次のようにしてルールセットを単純化できます。 親の中に子要素を入れ子にする, 次のように;

 ナビ身長：40px;幅：100％。背景：＃455868。ボーダーボトム：2ピクセルソリッド＃283744。 li 幅：600ピクセル。高さ：40ピクセル。 a 色：#fff;行の高さ：40ピクセル。 text-shadow：1ピクセル1ピクセル0ピクセル＃283744;

あなたも割り当てることができます 疑似クラス, 好き ホバー, アンパサンド（＆）記号を使用してセレクタに移動する.

追加したいとしましょう ホバー 上記のアンカータグには、このように書くことができます。

 a 色：#fff;行の高さ：40ピクセル。 text-shadow：1ピクセル1ピクセル0ピクセル＃283744; ＆：hover 背景色：＃000;色：#fff;

操作

以下のようにLESSで操作を実行することもできます。 足し算、引き算、掛け算、割り算 スタイルシート内の数値、色、および変数.

要素Bを要素Aの2倍にしたいとしましょう。その場合、次のように書くことができます。

 @高さ：100ピクセル.element-A 高さ：@高さ; .element-B 身長：@身長* 2;

ご覧のとおり、最初に値を @高さ その後、要素Aに値を代入します。.

要素Bでは、自分自身で高さを計算するのではなく, 高さに2を掛けることができます アスタリスク演算子（*）を使用します。これで、値を変更するたびに @高さ 変数, 要素B 常に2倍の高さになります.

以前のチュートリアルでより高度な操作例を確認してください。スリックメニューナビゲーションバーの設計.

範囲

LESSは範囲概念は、変数が最初にローカルスコープから継承され、それがローカルで利用できない場合、より広いスコープを検索します。.

 ヘッダー@色：黒;背景色：@色;ナビゲーション@色：青;背景色：@色; a 色：@色;

上記の例では、 ヘッダ があります黒背景色ですが ナビの背景色は青ローカルスコープに@color変数があるため、 ある より近い親から受け継がれている青もあります, ナビ.

最終的な考え

最終的には、この記事がLESSを使用してより良い方法でCSSを作成する方法についての基本的な理解を提供してくれることを願っています。最初は少しぎこちなく感じるかもしれませんが、もっと頻繁に試すと、きっとずっと楽になるでしょう。.

LESSスキルを次のレベルに引き上げるのに役立つ、さらにヒントや実践方法を探すことをお勧めします。.

LESS CSSチュートリアル：滑らかなメニューナビゲーションバーの設計
LESSカラー関数について
知っておくべき3つの新しいLESS CSS機能