生意気未満についての最近の初心者まとめ

less は CSS に基づく拡張技術です
.less はパーサー (koala など) を通じてファイル形式を CSS に変換します
@+変数名+値
構文
変数
LESS により開発者は変数をカスタマイズでき、変数を使用することができますグローバル スタイルで で使用される変数により、スタイルの変更が簡単になります。
次のコードから変数の使用法と機能を理解できます:
List 3 LESS file
@border-color: #b5bcc7;

.mythemes tableBorder{

border : 1px Solid @border-color;
}
コンパイルされた CSS ファイルは次のとおりです。コードから変数はVALUE(値)レベルで再利用されており、同じ値を変数として定義して一元管理できることが分かります。
この機能はテーマを定義するのに適しています。背景色、フォント色、境界線属性などの通常のスタイルを統一して定義できるため、テーマごとに異なる変数ファイルを定義するだけで済みます。もちろん、この機能は CSS RESET (スタイル シートのリセット) にも適用されます。Web 開発では、ブラウザのデフォルトの動作をシールドする必要があり、ブラウザのデフォルトの動作をオーバーライドするためにスタイル シートを再定義する必要があります。ここでは、LESS 変数を使用できます。必要に応じて、異なるプロジェクトのスタイル シートで変数を再割り当てするだけで済みます。
LESS の変数には、他のプログラミング言語と同じように値を再利用できます。これはスコープ (変数スコープ、開発者は通常スコープと呼びます) です。変数の検索の概念は、最初にローカル定義を検索し、見つからない場合は、グローバル定義まで上位の定義を検索します。以下では、簡単な例を通してスコープについて説明します。
リスト 5. LESS ファイル
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// ここでは、最近定義された変数 width 30px の値を取得する必要があります
}
}
#leftDiv {
width : @width; // 上記で定義された変数 width の値は 20px である必要があります

}
コンパイルされた CSS ファイルは次のとおりです。
リスト 6. CSS ファイル
#homeDiv #centerDiv {
width: 30px;

}

#leftDiv {
width: 20px; }
Mixins (ミックスイン)
Mixins ( mix in) 関数は、開発者にとって馴染みのないものではありません。LESS では、ミックスインとは、属性を 1 つの CLASS に追加することと同じように、多重継承の実装である Mixins 機能をサポートしています。現在のクラス。
LESS での Mixins の使用方法を簡単に見てみましょう:
リスト 7. LESS ファイル
// スタイル セレクターを定義します
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius; - webkit-border-radius: @radius;
border-radius: @radius;
// 別のスタイルセレクターで使用します
#header {
.roundedCorners;
#footer {
.roundedCorners
}
コンパイルされた CSS ファイルは次のとおりです。
リスト 8. CSS ファイル
#header {
-moz-border-radius:5px;
border-radius:5px; footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
上記のコードから、Mixins は実際には埋め込み Mixin の一種であることがわかります。簡単に言うと、ミックスインは実際にはルールレベルの再利用です。
ミックスインにはパラメトリック ミックスイン (ミキシング パラメーター) と呼ばれる形式もあり、LESS もこの機能をサポートしています:
リスト 9. LESS ファイル
// スタイル セレクターを定義します
.borderRadius(@radius){
-moz-border-radius : @ radius;
-webkit-border-radius: @radius;
border-radius: @radius; }
// 定義されたスタイル セレクターを使用します
#header {
.borderRadius(10px) // スタイル セレクターに渡されますパラメーターとして
}
.btn {
.borderRadius(3px);// // 3pxをパラメーターとしてスタイルセレクターに渡します

}
经过编译生成的 CSS 文件如下：
清单 10. CSS 文件
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
我们还可以给 Mixins 的参数定义一人默认值，如
清单 11. LESS 文件
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
经过编译生成的 CSS 文件如下：
清单 12. CSS 文件
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
清单 13. LESS 文件
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
经过编译生成的 CSS 文件如下：
清单 14. CSS 文件
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
Mixins 是 LESS 中很重要的特性之一，这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：
清单 15. LESS 文件
#mynamespace {
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
嵌套的规则
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
清单 16. HTML 片段

top

left

right

清单 17. 文件が少ない
#home{
color : blue;
幅: 600ピクセル;
高さ: 500ピクセル;
ボーダー:アウトセット;
#top{
ボーダー:アウトセット;
幅: 90%;
}
#center{
border:outset;
高さ: 300ピクセル;
幅: 90%;
#left{
border:outset;
フロート : 左;
幅: 40%;
}
#right{
border:outset;
フロート : 左;
幅: 40%;
}
}
}
经过编译生成の CSS 文例如下：
清单 18. CSS 文例
#home {
color: blue;
幅: 600ピクセル;
高さ: 500ピクセル;
ボーダー: 開始;
}
#home #top {
border: outset;
幅: 90%;
}
#home #center {
境界: 開始;
高さ: 300ピクセル;
幅: 90%;
}
#home #center #left {
border: outset;
フロート: 左;
幅: 40%;
}
#home #center #right {
border: outset;
フロート: 左;
幅: 40%;
}
上のページのコードからわかるように、LESS のプラグイン形式の書き込み法は HTML 内の DOM 構造に対応しており、これにより、私たちのサンプル形式の書き込みがより正確でより快適になります。
クリア 19. より少ないファイル
a {
color: red;
color: red;
テキスト装飾: なし。
&:hover {// 有 & 時間解析的は同じ元素またはこちらの元素の属性、無 & 解析は後代元素
color: black;
テキスト装飾: 下線;
}
}
经过编译生成の CSS 文例如下：
清单 20. CSS 文例
a {
color: red;
テキスト装飾: なし。
}
a:hover {
色: 黒;
テキスト装飾: 下線;
}
运算及関数
我们のCSS中充満大量の数型の値、比色、パディング、マージンなど、これらの数值のうちある特定の状況下では一定の関係があり、那么我们怎样利用は少なくなりますグループ织我们これらの数值の間の関係呢?我们来看この段代：
清单 21 。文件を少なくします
@init: #111111;
@transition: @init*2;
.switchColor {
カラー: @transition;
}
经輖译生成の CSS 文例下記：
清单 22. CSS 文例
.switchColor {
color: #222222;
}
上の例で使用されている LESS の演算は特性であり、数値型の値 (数字、色、量など) に対して加算除算を行う演算です。以下は、色操作に対するあまり提供されていない関数のリストです。
lighten(@color, 10%); // @color より 10% *明るい* 色を返します
darken(@color, 10%); // @color より 10% *暗い* 色を返します
saturate(@color, 10%); // @color より 10% *多い* 彩度の色を返します
desaturate(@color, 10%);// @color より 10% *低い* 彩度の色を返します
fadein(@color, 10%); // @color より 10% *透明度が低い*色を返します
fadeout(@color, 10%); // @color よりも 10% *透明度が高い色を返します
スピン(@color, 10); // @color より 10 度大きい色相の色を返します
スピン(@color, -10); // @color よりも 10 度小さい色相の色を返します
PS: 前述の代辞自 LESS CSS 官方网站，详情请见 http://lesscss.org/#-color-functions
これらの関数と JavaScript 中使用
清单 23 個のファイル
init: #f04615;
#body {
背景色: fadein(@init, 10%);
}
经过輖译生成のCSS文例如下：
清单 24. CSS文例
#body {
background-color: #f04615;これらの関数の主な役割は、色の変更を提供する機能であり、最初に色を HSL の色に変換することです。次に、このベース上で動作が実行され、ここでは例を示さないが、ＬＥＳＳは、色値を取得する方法も提供する。
コメント (コメント)
適切なコメントはコードの可用性を保護するために必要な手段であり、LESS のコメントもサポートされており、主に 2 つの形式があります: 単行コメントと多行コメント、これは JavaScript 内のコメント メソッドと同様です。ここでは詳しい説明は省略し、一点だけ注意しておきます。LESS 中の注釈 (// 単行注釈 ) は、承認後の CSS では表示できません。したがって、注釈がサンプル形式の説明に対して多行注釈を使用する場合は、LESS が使用されます。 VSサス
同様のフレームワークには SASS と LESS があり、どちらも CSS プリプロセッサであり、同様の機能を備えています。両方とも、変数、混合、ネスト、継承などの機能を備えています。 CSS の作成と保守に使用します。
LESS と SASS は相互に促進し、影響を及ぼします。それに比べて、LESS は CSS 構文に近いです

。