
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に感謝します。