LESSは新しいCSSプリプロセッサです。 簡単に言えば、LESSを使用すると、CSSファイルで変数、演算子、クラス、ネスト構造を使用できます。 この記事では、LESSの主な機能と、人気のあるRuby on Rails 3フレームワークにLESSをすばやく接続する方法について学びます。
Web開発と関係がある場合は、もちろんCSS（カスケードスタイルシート）に精通しています。 CSS記述言語は非常に単純で、ルールのセットです。各ルールは、コンマで区切られた1つ以上のセレクターと定義ブロックで構成されます。 定義ブロックは中括弧で囲まれ、一連のプロパティとその値で構成されます。
この単純なCSS構造により、初心者でも簡単にアクセスできますが、同時にいくつかの制限があります。 たとえば、変数を使用することは不可能であるため、繰り返されるコードのセクションは避けられません。 これはDRYの原則に反します（繰り返さないでください-文字通り、「自分を繰り返さないでください」）。
LESS CSSプリプロセッサとは何ですか？また、従来のCSSコードの欠陥をどのようにバイパスできるのでしょうか？ LESSは、CSSの基本機能を拡張します。変数と計算を使用できるようにし、OOPの原則を追加し、CSSルールの構造をより明確にします。
どのように機能しますか？
スタイルシートを含むcssファイルの代わりに、少ないファイルで作業します。 つまり 「styles.css」を残して、「styles.less」を作成/開きます。デフォルトでは、css-filesと同じフォルダーにあります。 HTMLドキュメントを変更する必要はありません。
Webサーバーがサイトの訪問者に「styles.css」を与える前に-LESSは「styles.less」からコンパイルされたものに置き換えます-ユーザーはすべてのルールに従って記述された標準CSSスタイルシートを取得します。
Ruby on Rails 3のインストール
LESSコンパイラーは、
Ruby on Rails 、
PHP 、
.NET 、
OS Xアプリケーションなどのタイプのプロジェクトへの統合に使用でき
ます 。
JSで記述されたバージョンもあります。 Ruby on Rails 3でのインストールのみを検討します。これは非常に簡単です。 まず、ruby gemをインストールします。
gem install less
次に、railプラグイン：
rails plugin install git：//github.com/cloudhead/more.git
css-filesがデフォルトのフォルダ「public / stylesheets /」に保存されていない場合-「config / environment.rb」にパスを書き込むと、次のようになります。
Less :: More.source_path = "public / css"
Less :: More.destination_path = "css"
それは基本的にそれです。
変数
変数を使用すると、開発を大幅に簡素化できます。 たとえば、色を扱う場合：
@ light-background-color：＃cfdae1;
#menu a：ホバー{色：@ light-background-color; }
#footer {background：@ light-background-color; }
オペレーター
LESSの変数に対して、任意の算術演算を実行できます。例：
@ base-margin：25px;
#header {margin-top：@ base-margin + 10px; }
または、色の濃淡をすばやく変更することもできます。
@ light-background-color：＃cfdae1;
@暗い背景色：@明るい背景色-＃333;
クラス
たとえば、角を丸くするための角丸クラスを定義できます。
.rounded-corners（ radius ）{
-webkit-border-radius： radius ;
-moz-border-radius： 半径 ;
border-radius： radius ;
}
セレクター内で使用します。
＃login-box {
.rounded-corners（5px）;
}
構造
たとえば、CSSのサイトメニューを記述する標準コードは次のようになります。
#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a {}
LESSでは、ルールを他のルール内に配置できるため、上記のコードセクションをより美しく論理的に書き換えることができます。
#header {
#nav {
ul {
li {
{}
}
}
}
}
ここで、標準のリンクスタイルを説明できます。
{
＆：ホバー{}
＆：アクティブ{}
＆：{}にアクセスしました
}
最後の仕上げ
「インポート」機能を使用して、他のユーザーをメインのlessファイルに接続できます。
「タイポグラフィ」のインポート 。
import 'print';
そして、いくつかのスラッシュの後にコード内でコメントを作成します。
#end {}
//ご清聴ありがとうございました
//トピックがあなたの興味を引くことを願っています
この記事の執筆を支援してくれ
たWembo Handbookに感謝します。