less の使用方法 (変数、混合、マッチング、演算、ネスト) の紹介

less の使用方法と一般的に使用されるもの (変数、混合、マッチング、操作、ネスト)

less の紹介とコンパイル ツール

less とは

1.LESSCSS は動的スタイル言語であり、CSS ですプリセット CSS に似た構文を使用し、変数、継承、操作、関数 などの動的言語機能を CSS に提供する処理言語の一種。これにより、CSS の作成と保守が容易になります。
LESSCSS は、ブラウザ、デスクトップ クライアント、サーバーなどの複数の言語と環境で使用できます。

コンパイル不要ツール

1. Koala Koala--コンパイル中にCSSフォルダーが作成されない場合、Koalaは自動的にCSSフォルダーを生成します
   言語の設定方法
   
   コンパイル方法
   -

2. Let webstorm のサポートは少なく、compile:

• Installnode.js --- これは将来使用されるパッケージ管理ツールです

• WIN+R

• Input npm install less

...

less syntax

追伸: 以下の知​​識ポイントは上記の知識ポイントを使用します (たとえば、印象を深めるために混合に変数が使用されます^_^)

1. コメント

• //lessでのみ表示
  

• /**/コンパイルされたCSSファイルに表示されます

変数

• の書き方もう少しで

  りー

• コンパイル後にCSSに表示されるのは

  @ly_width:100px;
  .box {
  width:@ly_width;
  }

• 境界線の半径の互換性を解決するには@

mix

• で変数を定義してください

  .box {
  width:100px;
  }

• レスの書き方

  .border_radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
  }

• コンパイル後、cssに表示されるのは

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border(@border_width:3px;) {
  border:@border_width solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .border();
  }

• lessで書く方法

  .one {
  width: 100px;
  height: 200px;
  background-color: #008000;
  border: 3px solid #ff0000;
  }

• コンパイル後、cssに表示されるのは

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border(@border_width) {
  border:@border_width solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .border(1px);
  }

• もしあなたがまずlessでコードを読みたいです .oneで.borderスタイルを適用するにはどうすればよいですか

  .one {
  width: 100px;
  height: 200px;
  background-color: #008000;
  border: 1px solid #ff0000;
  }

• は次のように書かれています

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border {
  border:1px solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  }

• パラメータなしの混合
  .border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

パラメータとの混合---デフォルト値なし (カンマまたはセミコロンで区切って複数のパラメータを渡すことができます。セミコロンを推奨します。以下は1つのパラメータの例です)

• パラメータとの混合- --with デフォルト値 (複数のパラメータを渡すことができます。以下では例として 1 つのパラメータを使用します)

• CSS3 互換性を解決するときによく使用されます

• マッチングモード
レスな記述方法

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
border:1px solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.border;
}

compile CSSで最終的に表示されるのは

//定义上,下,左,右边框的样式
.border(top;@border_width:5px;@border_color:red){
border-top:@border_width solid @border_color;
}
.border(bottom;@border_width:5px;@border_color:red){
border-bottom:@border_width solid @border_color;
}
.border(left;@border_width:5px;@border_color:red){
border-left:@border_width solid @border_color;
}
.border(right;@border_width:5px;@border_color:red){
border-right:@border_width solid @border_color;
}
//如果想写通用的样式 可以在下面的代码中写 格式是固定的
.border(@_,@border_width:5px;@border_color:red){
border-color:yellow;
}
.border_use1 {
//选择和if差不多 如果是left就调用上面对应的
.border(left);
}
.border_use2 {
//选择和if差不多 如果是right就调用上面对应的
.border(right);
}

で、上記のmixingとやや似ているように理解できます

操作

lessは

.border_use1 {
border-left:5px solid #ff0000;
border-color:yellow;
}
.border_use2 {
border-right:5px solid #ff0000;
border-color:yellow;
}

で書かれています

コンパイル後、CSS で表示されます。最も優れている点は、

@ly_width:100px;
.one {
width:@ly_widht + 100;
}

演算で加算、減算、乗算、除算の演算が可能で、属性値や色の演算も実行できることです...

nested

html構造

.one {
width:200px;
}

less

<p class="one">
<p class="two"></p>
</p>

• での書き方 コンパイル後、CSSに表示されるのは

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:red;
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .two {
      background-color: green;
  }
  }

1つのセレクターの中に別のセレクターをネストすることができ、コードがきれいに見えます-cut となり、コードの保守性が向上します コンパイル後の

@arguments 変数

less

.one {
width: 100px;
height: 200px;
background-color: #ff0000;
}
.one .two {
  background-color: green;
}

の書き方はCSSで表示されます

//和前面提到的混合一起举个栗子
.border(@border_width;@border_style;@border_color){
border:@arguments;
}
.one {
.border(1px;solid;red);
}

は全ての変数と処理を含めることができます変数を一緒に

以上がless の使用方法 (変数、混合、マッチング、演算、ネスト) の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。