少ないダイナミックスタイル言語

1.lessはじめに

少ない等の特性変数、ミックスインを増加させる、CSS言語を拡張CSSプリプロセッサ言語、機能、その結果、CSSは、保守及び拡張が容易です。

2.lessは、ブラウザによって解析されるためにコンパイルする必要があります

以下は解決できないため、ブラウザ自体は、CSSファイルを解析することができます。
以下、コンパイルのいずれかが、彼はノード環境で対応するCSSファイルに変換することができます。
対応する参照JSファイルの導入後以下

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script>

3.インストールノード環境

、あまり依存ノード環境をコンパイルしNode.jsのインストール
インストール後にCMDに入力します：-vノード
このコマンドは、ノードのバージョンを照会するために使用され、クエリにバージョン番号は、インストールが正常に完了したと述べました

4.以下のコンパイラをインストールします。

CMDの環境で以下-gインストールNPM実行します

5.手動少ないファイルをコンパイル

ファイルディレクトリで以下をコンパイルするCMDウィンドウを開き、コンパイルするには、次のコマンドを入力します。

lessc test.less test.css

ファイルにコンパイルtest.cssの下に、このディレクトリへのTest.less

変数の定義と使用6.less

/*定义变量*/
@gbColor:red;

.box{
    width: 200px;
    height: 100px;
    /*使用变量*/
    background-color: @gbColor;
}

コンパイル結果

.box {
  width: 200px;
  height: 100px;
  background-color: red;
}

他のCSSクラスへの参照7.

.addBorder{
    border:1px solid red;
}
.box{
    width:100px;
    height: 100px;
    /*引用其他css类*/
    .addBorder();
}

8.機能

/*设置参数，且有默认的值*/
.addBorder(@size:1px){
    border:@size solid red;
}
.box{
    width:100px;
    height: 100px;
    /*引用并传递参数*/
    .addBorder(10px);
}

9.ネストされました

.box{
    width:100px;
    height: 100px;
    /*只针对子级div有效*/
    > div{
        display: float;
    }
    /*针对后代所有p标签都有效*/
    p{
        text-align:center;
    }
}

10.擬似クラス

div{
    width:100px;
    height: 100px;
    &:nth-of-type(1){
        background-color: red;
    }
}

11.操作

div{
    width:400px;
    height: 100px;
    >.item{
        /*运算 相当于33.3333%*/
        width:1/3*100%;
    }
}

12.インポート

あなたは.lessファイルをインポートすることができ、このファイル内のすべての変数はすべて使用することができます。ファイルは.less拡張子を輸入している場合は、拡張子は省略することができます。

@import "library"; // library.less