文書ディレクトリ

1.変数(Variables)

2.演算(Operations)

3.混合(Mixins)

4.ネスティング

5.エスケープ

6.関数(Functions)

7.マッピング(Maps)

Less(Leaner Style Sheetsの略)は、後方互換性のあるCSS拡張言語です.LESSはCSSに変数,継承,演算,関数などの動的言語の特性を与える.LESSは、クライアント上で実行(IE 6+、Webkit、Firefoxをサポート)してもよいし、Nodeを利用してもよい.jsまたはRhinoはサービス側で動作します.LessはCSSによく似ているので、勉強しやすいです.また、LessはCSS言語に少し便利な拡張を加えただけで、Lessがこのように学びやすい理由の一つです.
ブラウザ環境でのLessの使用:(リンクの順序に注意)

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" >script>

Node.js環境でのLessの使用:

npm install -g less
> lessc styles.less styles.css 

1.変数(Variables)

@で変数を宣言する(グローバル/ローカル変数に分ける)

//    
@width:100px;
@height:100px;
@borderColor: red;
.block{
//    ,          
  @bgcolor:#444;
//       
  width: @width;
  height: @height;
  border: solid 1px @borderColor;
  background-color:@bgcolor;
}

2.演算（Operations）

演算子を使用する場合は、できるだけ変数との間にスペースがあり、マイナス記号のように未定義(変数-)と認識されないようにします.

接続演算子は、変数であってもよく、字面量であってもよい.

色の演算子は、rgb値の対応する位置に加算され、255より大きい場合は255がデフォルトです.

@base:2;
@baseColor: blue;
@borderColor: red;
.menu{
  width: @width*@base;
  height: @height -2;
  border: solid 1px @borderColor+@baseColor;
}

3.混合（Mixins）

1つのルール・セットから別のルール・セットに属性のセットを含める(または混入する)方法(メソッドの定義と呼び出し)1)パラメータなし

.borderRadius{
  border-radius:10px ;
}
//    ：
//        ，          
.borderRadius();
.borderRadius;

2).パラメトリック

//1.        
.borderRadius(@radius){
  border-radius:@radius ;
}
//    ：
//        ,     
.borderRadius(40px);

//2.       
.borderRadius(@radius:10px){
  border-radius:@radius ;
}
//    ：
//        ,          ，       
.borderRadius(50%);
.borderRadius();

4.ネスト(Nesting)

コンパイルとメンテナンスが容易

類似子親空フォーマット書き方(ul li)

&現在のセレクタを表す親

@ルールネストおよびバブル:@ルール(@mediaまたは@supportsなど)は、セレクタと同じ方法でネストできます.@ルールは前面に配置され、同じルールセットの他の要素の相対的な順序は変更されません.これを泡立ちと言います.

.menu{
  width: @width*@base;
   @media (min-width: 768px) {
     width: @width;
   }
  height: @height;
  border: solid 1px @borderColor+@baseColor;
  .baby{
    width: @width;
    height: @height;
    border: solid 1px @borderColor;
    margin: auto;
    position: relative;
    //  
    &:hover{
      background-color: darkblue;
    }
    //  
    &:after{
      position: absolute;
      content: '';
      border: solid 12px #6bcbfa;
    }
  }
}

5.エスケープ（Escaping）

属性または変数値として任意の文字列を使用できます.Interpolationを除き、「anything」または「anything」形式のコンテンツはそのまま出力されます.

@media768:~"(max-width:768px)";
.zy{
  width: 200px;
  height: 300px;
  border: solid 1px @borderColor;
  margin: auto;
  @media @media768{
    width: 768px;
    background: red;
  }
}

6.関数(Functions)

1).論理機能(Logical Functions)

iscolor():色であるかどうかを検出し、true/falseを返します.

if()論理判断:if( ,true,false)

@some:#dd1;
.iscolor{
  width: 100px;
  height: 100px;
  //    ，      ，        
  background-color: if(iscolor(@some),@some,black);
}

ブール値boolean(condition); condition:ブール式

2).String Functions(String Functions)escapeトランスコード文字列.文字列の値を持つトランスコードに使用されます.escape(string); 3).インベントリ機能(List Functions)

length(list);戻り長

range(start,end,step);数字のセット(start,step(フレーム数)オプション)

を生成する.

each(list,rules);遍歴方法

//each()       
//3   
//value       ，index         1  ，key   
each(range(5), {
.col-@{value} {
  width: @value * 5px;
  height: @value * 5px;
  border: solid 1px saddlebrown;
}});
//   
@arr:a,b,c,d,e;
each(@arr,{
.col-@{value} {
  width: @index * 5px;
  height: @index * 5px;
  border: solid 1px saddlebrown;
}
});
//   
@set:{one:red;two:blue;three: orange; four: pink; five: yellow; };
each(@set,{
  .col-@{key} {
    width: @index * 5px;
    height: @index * 5px;
    border: solid 1px saddlebrown;
  }
});

4).数学関数(Math Functions)
Ceil上向き整列floor下向き整列percentage変換パーセントround四捨五入sqrt開二乗abs絶対値sin asin cos acos tan atan pi 3.141592653589793 powべき乗min最小値のmax最大値の
5).タイプメソッド(Type Functions)
数値かどうかを検出する方法:isnumber、戻り値true false文字列かどうかを検出する:isstring、戻り値true falseパスかどうかを検出する:isurl、戻り値true flase画素値を検出する:ispixel戻り値true false em単位かどうかを検出する:isem、戻り値true false%単位かどうかを検出する:ispercentage、戻り値true false
6).色の関数
rgb()rgba()hsl():ハッシュ値hsl(90, 100%, 50%)操作色の関数:
ライトネス:色輝度lightness(hsl(90, 100%, 50%))を設定する
lighten:色の明るさを減らすlighten(hsl(90, 80%, 50%), 20%) darken:色の明るさを強めるdarken(hsl(90, 80%, 50%), 20%) fadein:色の透明度を下げるfade:不透明度を設定するrgba(241,70,50,0.1),80% mix:色を混ぜる方法、前の2つは色で、バランスポイントはオプション、デフォルト50%tint:色と白を混合し、バランスポイントはデフォルト50%shade:色と黒を混合し、バランスポイントはデフォルト50%multiply:2つの色を混合し、暗くするscreen:2色を混ぜて明るくする

7.マッピング（Maps）

カプセル化されたネーミングスペースを定義します

#space() {
  primary: blue;
  secondary: green;
  .btn {
    width: 100px;
    height: 100px;
    font-size: 13px;
  }
}
.bgcolor {
    width: 200px;
    height: 200px;
    background-color: #space[primary]; //          
    .btn {
      #space.btn(); //      
    }
  }