Lessチュートリアル

LessはCSS言語を拡張し、変数、ミキシング(mixin)、関数などの機能を追加し、CSSをメンテナンスしやすくし、テーマを作成しやすくし、拡張します。

クライアント使用

ダウンロードアドレス

外注スタイル

あなたを導入します.lessスタイルファイルの場合rel属性値を「stylesheet/less」に設定:

インラインスタイルは次のとおりです。

次にlessをダウンロードする.jsはラベルでそれを導入し、ページの要素内に配置します:

:あなたのlessスタイルファイルは ずlessを しなければなりません.jsの に します.

Lessの を すると、スタイルのどこかで を し、スタイルに できます.これにより、 した パラメータ を するだけで、グローバルを することができます.

@base:red;
 body{color:@base}
 

LESSでは、 の セットを1つのclassとして し、 のclassでこれらの

.bordered {
 border-top: solid 1px red;
 border-bottom: solid 2px green;
 } 
 
.div1 {
 color: #111;
 .bordered;
 }
 
 
.div2 {
 color: red;
 .bordered;
 }
 

をLESSで び すことができます.また、 のようにパラメータ き セット

.border-radius (@radius: 5px) {
 border:1px solid red;
 border-radius: @radius;
 width:300px;
 }
 .div1 {
 .border-radius(0px);
 }
 .div3 {
 .border-radius;
 }
 .div2 {
 .border-radius(20px);
 }
 

,

arguments

@argumentsを することもできます.Mixinsはこのパラメータを すると、すべての

.pad(@top,@right,@bottom,@left) {
 padding:@arguments;
 }
 div{
 width:400px;
 border:1px solid red;
 .pad(10px,50px,100px,40px)
 }
 p
 {
 background-color: green;
 }
 

,

を します. によっては、 されたパラメータに づいてブレンドのデフォルトレンダリング

.mixin (red, @color) {
 color: red;
 }
 .mixin (green, @color) {
 color: green;
 }
 .mixin (@_, @color) {
 display: block;
 }
 @switch: red;
 .div1 {
 .mixin(@switch, #888);
 }
 

,

を したい があります. に づいてマッチングしたい は、 とパラメータが する ではなく、ガイドは に であるように えます

.mixin (@a) when (@a =red) {
 background-color: red;
 }
 .mixin (@a) when (@a =green) {
 background-color: green;
 }
 .mixin (@a) {
 color: @a;
 }
 .red { .mixin(red) }
 .green { .mixin(green) }
 

LESSは、 セレクタではなく セレクタを きたい は、&を することができます.この は クラスに に ちます:hoverと:focus,& のレベルの を します