CSSプリプロセッシング言語--Less

入門したばかりの菜鳥として、簡単な資料を整理して、大神さんによろしくお願いします.
一、Lessとは何か
1、CSSのような文法を使って、CSSにダイナミック言語の特性を与えて、例えば変数、継承、演算、関数など、CSSの編纂とメンテナンスをもっと便利にして、cssの前処理言語の1種に属します.CSSのロジック機能をより便利に処理し、CSSコードをよりよく管理する.
二、使用取付
1、node.jsに基づく
まずnode環境をインストールし、公式サイトで状況に応じてダウンロードすることができます.http://nodejs.cn/download/ npmによるグローバルインストール

$ npm install -g less

lessのコンパイルコマンド:まず現在のアドレスに進みます

$ lessc               
$ lessc styles.less styles.css

圧縮されたCSSを出力し、最後に-xを追加し、より良い圧縮効果を得るには、-clean-cssオプションでClean CSSを有効にして圧縮することもできます.

$ lessc styles.less styles.css -x

2、ブラウザ側の直接使用

  less js     ，  2.5.3  
http://lesscss.cn/#download-options

lessファイルを導入しrelの違いに注意

<link rel="stylesheet/less" href="example.less" />

次にjsファイルを導入します

<script src="lesscss-1.4.0.min.js">script>

三、簡単に使う
1.変数

 @  ，        ，         ，   “    ”，        。

/*  */
@styles-w:100px;
.div{width:@styles-w;}

/*    */
.p{font-size:@styles-f;}
@styles-f:16px;

/*           */
@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

コンパイル:

/*  */
.div{width:100px;}

/*    */
.p{font-size:16px;}

/*           */
.class1 .class {
    three: 3;
}
.class1 {
    one: 1;
}

2.混合(Mixins)
共通の.classを定義します.もちろんCSSに表示したくない場合は、隠すことができます.

.border{
    border-radiu:5px
}
#header{
    .border;
}

/*  ， ()      */
.border(){
    border-radiu:5px;
}

/*   ，       */
.border(@ten:10px){
    border-radiu:@ten;
}
#footer{
    .border(20px);
}

コンパイル:

.border{
    border-radiu:5px
}
#header{
    border-radiu:5px;
}
/*  ， ()      */
/*   ，       */
#footer{
    border-radiu:20px;
}

3.ネスト
ネストされた方式でCSSを編纂して、更に便利な処理CSSスタイル

#nav{
    font-size:16px;
    .a{color:red}
    .b{
        border-radiu:10px;
        .c{
            font-size:20px;
            &:hover{
                background:white;
            }
        }
    }
}

コンパイル:

#nav {
  font-size: 16px;
}
#nav .a {
  color: red;
}
#nav .b {
  border-radiu: 10px;
}
#nav .b .c {
  font-size: 20px;
}
#nav .b .c:hover {
  background: white;
}

4.演算
任意の数値、変数、色で演算できます

@font-s:10px+1;
@color:#2DC456;
.a{font-size:@font-s * 2}
.b{color:@color + #111}

コンパイル:

.a {font-size: 22px}
.b {color: #3ed567;}