もっと少なく

以下は、以上のCSS-ある以下CSSよりも、より多くのである
少ないとは何ですか？

LESSは、迅速かつ容易クリーナー、クロスブラウザ優しいCSSの作成をサポートしています。
LESS JavaScriptが速く、他のCSSプリプロセッサよりもコンパイルし、設計されており、ライブで作成されます。
LESSは、それが読みやすく、簡単に変更することにより、非常に重要であるモジュラーファッションであなたのコードを維持します。
より高速なメンテナンスをLESS変数を使用することによって達成することができます。
少ない開発
少なくは2009年にアレクシスSellierによって設計されました。LESSは、オープンソースです。LESSの最初のバージョンはRubyで書かれ、それ以降のバージョンでは、JavaScriptが代わりにあります。
以下の機能
明確と可読コードは、組織的に書き込むことができます。
私たちは、それがコード全体で再利用することができ、スタイルを定義することができます。
LESSは、CSSのスーパーセットで、JavaScriptベースです。
LESSはアジャイルツールであり、コードの冗長性の問題を除外することができます。
以下の利点
LESS CSSを簡単にブラウザで作業を生成することができます。
LESSは、ネストされた書き込みクリーナー、よく組織コードを使用することができます。
メンテナンスは、より高速な変数を使用することによって達成することができます。
LESSは簡単にクラス全体を再利用するためのルールに焦点を当て、それらを参照することができます。
LESSは、より速く、時間節約エンコードされたように、操作を使用して提供しました。
以下の欠点
新しいCSS前処理を学習している場合、それは時間がかかります。
そのため、モジュール間の密結合のため、我々は、再利用および/または依存するモジュールをテストするために多くの努力を取る必要があります。
古いプレプロセッサ（例えばサス）と比較して、以下でより少数のフレームを有し、フレームコンパス、重力とSusyの組成によってサス。
jQueryのような少ない（CSSのライブラリー）
LESS CSSはCSSは、このような変数を、継承、などの動的言語機能を、与えられ、プリ言語はCSSの構文に似ているCSS、に属し、言語のダイナミックなスタイルです操作、機能など、簡単にCSSを記述し、維持するために
コンパイルツールを
コアラのコンパイル
- 人々開発SASS / LESSコンパイラツール
- ダウンロード：http://koala-app.com/index-zh.html
Nodejsライブラリー
使用するブラウザ
コアラの基本的な使用を

で以下のコメント

LESSコメント：
/ *コンテンツは.CSSにコンパイルされている* /ファイルを予約
//内容がコンパイルされていない、ファイルには表示されません.CSS

変数

変数名@：：など@で始まる//宣言の変数、値;

@w: 500px; 
@h: 300px;
.box {
    width: @w;
    height: @h;
}

混在

引数なし（または基準時間無し（）括弧）を有する：
宣言、.bd_radius {};参照、■は{.bd_radius}
パラメータ（（）括弧バンドが参照されなければならない）：
①文、.bd_radius（@radius）{境界半径：@radius;}
参照、■は{.bd_radius（5pxの）; } - パラメータが持っている
と、デフォルト値を
.bd_radius（@radius：10pxの）{ボーダー -radius：@radius;}

マッチモード

場合のJS相当、排他的ではないが、
条件を満足するために一致した後、

すなわち、低い互換性のあるバージョン（ボーダースタイル：破線）CSSトライアングル

.triangle(top, @w:5px, @c:#ccc){...}
.triangle(bottom, @w:5px, @c:#ccc){...}
.triangle(left, @w:5px, @c:#ccc){...}
.triangle(right, @w:5px, @c:#ccc) {
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}

@ _変数、最初のパラメータが渡されているものに関係なく、この方法では一致します

.triangle(@_, @w:5px, @c:#ccc) {
    width: 0,
    height: 0,
    overflow: hidden;
}

引用：

.sanjiao { .triangle(right, 100px); }

コンパイルされたCSS：

.sanjiao {
   width: 0,
    height: 0,
    overflow: hidden;
    border-width: 100px;
    border-color: transparent transparent transparent #ccc;
    border-style: dashed dashed dashed solid;
}

操作

算術演算は、長帯域画素が存在することができる限り、実行することができる、スペースがシンボルの両側に必要とされる
演算の少ないです

@test_01:300px;
.box_02{
  width:@test_01 + 20;
  height: (@test_01 - 200) * 5;
  background:#ccc - 10;
}

ネストされたルール

あまりネスト：CSSセレクタの別の修飾は、各CSSセレクタ内にネストされたことにより、変換レベルのCSSセレクタを完了します。層セレクタでそれを表す、請求＆シナリオ、擬似クラスを適応。
より、マッチのより多くの数、衝撃荷重ネスト
上の選択された1つの層の＆代表を

.list {
    li { ... }
    a {
        color: blue;
        &:hover { color: red; }
    }
    span { ... }
}

@arguments変数

すべての変数の後に、定義により、シーンの複数のパラメータを代表して、同じCSSスタイルは、複数の属性値に対応する属性、例えば国境：1pxのソリッドピンク、プロパティの値がパラメータとして渡された場合は、代わりに対応するパラメータの@argumentsを使用することができます。どのように引用するには？いつものように、「」に対応する参照パラメータの受け渡しは、中間体を使用することができる場合に渡すかする『』離れて、より少ない質量、プレス注文マッチングする場合。
渡されたすべてのパラメータの代わりに@arguments

.border (@w:1px, @s: solid, @c: red) {
    border: @arguments;
}

引用：

.test_border {
    .border(20px);
}

コンパイルされたCSS：

.test_border {
    border: 20px solid red;
}

##回避コンパイル,!重要とまとめて
1つの回避コンパイルを

時々、私たちは独自のCSSの構文の一部不正確な文法や使用をエクスポートする必要がLESSいくつかは知りません。
出力するために、この値は、我々は、文字列の前に〜を追加することができます
たとえば、：幅：〜「のCalc（100％ - 35）」
〜を「...」
〜「...」
すべての混合をもたらす2つの重要なキーワードを！スタイル、上の追加！重要
！重要なスタイル優先順位が最も高いです。

詳しい情報

あまりの中国のウェブサイト
http://lesscss.net
中国のレガシーウェブサイト：http://old.lesscss.net/article/document.html

lucasxt

公開された42元の記事・ウォンの賞賛4 ・ビュー4619

プライベートの手紙の懸念

研究ノート-less