less入門ノート

一、入れ子
1、あるセレクタに別のセレクタをネストして、要素間の階層関係を表現します.たとえば、lessファイルに次のように書きます.

.left{
  float:left;
  .padding_left{
    padding-left:20px;
  }
}

対応するcssコードを得る:

.left{
  float:left;
}
.left .padding_left{
  padding-left:20px;
}

2、&の用法コア:&記号はネストされた外層要素自体を表す.例1マウスサスペンション:lessでhoverスタイルの元の書き方:

a{
  color:#fff;
}
a:hover{
  color:green;
}

ネストされた書き方

a{
  color:#fff;
  &:hover{
    color:green;
  }
}

例2あげる.left要素自体が追加されます.padding_leftスタイルエラー書き方:

.left{
  float:left;
  .padding_left{
    padding-left:20px;/*      .left      .padding_left    */
  }
}

正しい書き方:

.left{
  float:left;
  &.padding_left{
    padding-left:20px;/*      .left    */
  }
}

二、変数
変数を使用すると、一連の汎用スタイルを個別に定義し、必要に応じて呼び出すことができます.1、基本用法設定の3つの変数はそれぞれ:@width@borderStyle@color lessファイルに書く:

@width:2px;
@style:solid;
@color:red;

.box{
width:300px;
height:100px;
border:@width @style @color;
}

コンパイルcssファイル後

.box{
width:300px;
height:100px;
border:2px solid red;
}

2、変数の作用域①括弧中の変数の作用域は現在の括弧②互いにネストされた括弧中であり、内部括弧では外部括弧で定義された変数を使用することができる.外部カッコでは、内部カッコで定義された変数は使用できません.
三、混合
1、通常の混合は1つの定義されたclassAを別のclassBに導入し、classBがclassAのすべての属性を継承することを簡単に実現する.例:lessファイル

.classA{
  classA   ；
}
.classB{
   .classA;/*  classB    classA      */
   classB      ；
}

2、パラメータ付き混合(パラメータ設定のデフォルト);ここでのパラメータは変数を指します.lessファイル:

.border(@width,@color){
border:@width solid @color;
}

.box1{
   .border(1px,green);
}
.box2{
  .border(2px,pink);
}

3、既定値のパラメータ混合

.border(@width:1px,@style:solid){
   border:@width @style yellow;
}
.box1{
   .border();/*     1px solid yellow*/
}
.box2{
   .border(2px);/*         ，   border:2px solid yellow;*/
}
.box3{
    .border(3px,dotted);/*        ，                    */
}

4、@arguments変数、複数の変数名の代わりに使用

.border(@width:1px,@style:solid){
  border:@arguments green;
}
.box1{
    .border();/*border:1px solid green;*/
}
.box2{
   .border(dotted,1px);/*border:dotted 1px green;*/
}
.box3{
   .border(dotted);/*border:dotted solid green;*/
}

5、パターンマッチング

.border(top,@width:1px){
border-top:@width solid green;
}
.border(right,@width:1px){
border-right:@width solid blue;
}
.border(bottom,@width:1px){
border-bottom:@width solid pink;
}
.border(left,@width:1px){
border-left:@width solid orange;
}
.border(@_,@width:1px){
/*              */
width:100px;
}

.box1{
  .border(top,5px);/*border-top:5px solid green;width:100px;*/
}
.box2{
  .border(right);/*border-right:1px solid pink;width:100px;*/
}

四、Math関数
1、round()作用:四捨五入例えば:

width:round(5.5)*1px;

2、ceil()作用:上向きに整える3、floor()作用:下向きに整える
五、ネーミングスペース
適用シーン:テーマスタイルの切り替え.

.blue{
   .button{
    background:blue;
    }
}
.red{
   .button{
    background:red;
    }
}
.box{
   .red  .button;/*        .red        */
}

六、注釈

//    ，            css   （        ）
/*    ，           CSS     */

七、@import
役割:B.lessファイルにA.lessファイルを導入します.例:

@import "A.less"

この場合、A.lessで定義した変数をB.lessで直接使用できます.
八、コンパイルを避ける(演算記号などをエスケープ処理する)
lessファイル

@rem:32rem;
.box{
width:@rem;
font:(12/@rem)/(20/@rem) '  ';
}

対応するcssファイルが生成されます.

.box{
width:32rem;
font:(12/32rem)/(20/32rem) '  ';
}

明らかに、これは私たちが望んでいる結果ではありません.
正しい方法は、lessファイルで演算子を''で包み、前に~を付けます.

@rem:32rem;
.box{
width:@rem;
font:(12/@rem)~'/'(20/@rem) '  ';
}

.cssファイル

.box{
width:32rem;
font:0.375rem/0.625rem '  ';