less学習ノート3-言語特性(extend)

extendという部分は本当にどう説明すればいいか分からないので、less中国語網という部分は全然翻訳されていないのも無理はありません.一部を見ていると何とも言えない感じがしますが、違和感があり、はっきり言えない感じがするので、extendを使っているところは英語のextendを使っています.3回目に読んだとき、突然extendにJavaで継承されているような感じがしたので、最後にextendを継承に翻訳することにしました.Java継承の簡単な概念を少し知っている仲間がいて、extendの役割と原理を簡単に理解できるはずです.自分で2つのセレクタAとBを定義して、セレクタAとBの導入は便利な文の中で解釈する理解を導入して、私の表現にも便利で、だから先にセレクタAとBの定義を覚えてから次の内容を見てよく理解することができて、もちろん最も良いのは英語の原文と結びつけて一緒に勉強して、もっと良い理解があれば多く提出することを歓迎します.まだ一部の説明がはっきりしていないので、すべての勉強が終わってからもう一度整理するように努力しています.
継承(Extend)
Extendはlessの擬似クラスとして理解でき、A:extend(B)の形式である.この擬似クラスセレクタ(A)を使用すると、その条件に合致するセレクタ(B)のスタイルルールを自己用に参照することができる.すなわち、AはBのスタイルルールを持つ.
(A:extend(B))以下では、A汎指でextend擬似クラスを使用するセレクタを、B汎指でextend擬似クラスが一致しないセレクタを指します.
v 1にパブリッシュ4.0

nav ul{
    &:extend(.inline);
    background: blue;
}

上で設定したルールでは、「extend」という擬似クラスは、「extendを使用するセレクタ」(nav ul)に.inlineのルールを持たせます..inlineというセレクタが存在しない場合、Aセレクタの宣言コードブロックはそのままになりますが、extend文は無効になります(extendはcssではないため).

nav ul{
    &:extend(.inline);
    background: blue;
}
.inline{
    color: red;
}

   ：

nav ul{
    background: blue;
}
.inline,nav ul{
    color: red;
}

注意nav ul:extend(.inline)セレクタがnav ulにコンパイルされるプロセス-コンパイルする前に、セレクタ内のextend擬似クラスの文が削除され、残りの文はそのままになります.extendのBセレクタにスタイルがない場合、extendはコンパイル中に削除されます(ただし、extendは他のセレクタに影響を与える可能性があります).
Extend構文
Extendはセレクタの後に続くか、ルールに配置されます.擬似クラスセレクタのように見え、オプションのパラメータallを持つ

.a:extend(.b){ ... }
//                  
.a{
    &:extend(.b);
}

.c:extend(.d all){
    //   ".d"     ，  ：" .x.d"  ".d.x"
}
.c:extend(.d){
    //       ，          ".d"   
}

Extendには1つ以上のクラスをカンマで区切ることができます

.e:extend(.f){...}
.e:extend(.g){...}
//              
.e:extend(.f,.g){...}

Extendの使い方
Extendの使用方法は、通常の擬似クラスを使用するように、1つのセレクタに複数のExtendを含めることができますが、すべてのExtendはこのセレクタの末端に配置されます.

Extendセレクタの後ろに配置:pre:hover:extend(div pre)

セレクタとExtendの間の許容間隔スペース:pre:hover:extend(div pre)

では、複数のExtend:pre:hover:extend(div pre):extend(.bucket tr)=pre:hover:extend(div pre,.bucket tr);

以下の用法は誤りである:pre:hover:extend(div pre).nth-child(odd)、Extendは最末端

に置かなければならない.
複数のセレクタが同じスタイルルールを持つ場合、各セレクタは独自のExtendキーワードを持つことができます.複数のセレクタに1つのルールがある場合は、次のようにします.

.big-division,
.big-bag:extend(bag),
.big-bucket:extend(bucket){
  ...
}

ルール内のExtend
Extendは&:extend(selector)という構文を使用してextendをルール内に配置できます.Extendをルール内に配置することは、各セレクタにExtendを単独で作用させる簡略化された形式である.

    ：
pre:hover,.some-class{
    &:extend(div pre);
    ...
}

              Extend：
pre:hover:extend(div pre),
.some-class:extend(div pre){...}

Extendでネストセレクタを使用する
Extendでは、ネストされたセレクタ(すなわち、Bセレクタがネストされたセレクタ)を使用できます.

.bucket{
    tr{
        color: blue;
    }
}
.some-class:extend(.bucket tr){ ... }

   ：
.bucket tr,
.some-class{
    color: blue;
}

Extendの正確な一致
Extendのデフォルトでは、Bセレクタが*(アスタリスク)を使用するかどうかにかかわらず、すべてのセレクタでBセレクタと一致するセレクタが見つかります.2つの子孫式(詳細は次のセクションを参照)が同じ要素に対応している場合、一致する場合も子孫式のフォーマットに基づいて一致します.唯一の例外は属性セレクタであり、lessはそれらの意味が同じで一致できることを知っています.

.a.class,.class.a,.class>.a{
    color: blue;
}
.test:extend(.class){ ... }//            

*任意のセレクタと考えられます.*classと.classは同一の要素配列に対応しているが,Extendがマッチングする場合は両者を同一とは考えない.

*.class{
    color: blue;
}
.test:extend(.class){ ... }//     *.class     

   ：
*.class{
    color: blue;
}

一致する場合は、擬似クラスの順序に従います.セレクタlink:hover:visitedとlink:visited:hoverは同じ要素に一致しますが、Extendはそれらを区別します.

link:visited:hover{
    color: blue;
}
.selector:extend(link:hover:visited){ ... }

   ：
link:visited:hover{
    color: blue;
}

子孫式
一致は、子孫式の形式に基づいて一致します.子孫式1 n+3とn+3は等しいが、Extendは両者を一致させない.

:nth-child(1n+3){
    color: blue;
}
.child:extend(:nth-child(n+3)){ ... }

   ：
:nth-child(1n+3){
    color: blue;
}

アトリビュートセレクタのリファレンスタイプは一致しません.次の場合は同じです.

[title=identifier]{
    color: blue;
}
or
[title='identifier']{
    color: blue;
}
or
[title="identifier"]{
    color: blue;
}
.noQuote:extend([title=identifier]){}
.singleQuote:extend([title='identifier']){}
.doubleQuote:extend([title="identifier"]){}

   ：
[title=indentifier],
.noQuote,
.singleQuote,
.doubleQuote{
    color: blue;
}
or
[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}
or
[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

Extend"all"
Extendの最後のパラメータがallであることを指定すると、lessはブラーマッチングのようにBセレクタの名前を含むCセレクタに一致します.セレクタに一致すると、Cセレクタがコピーされ、Cセレクタの名前に一致する部分がBセレクタの名前に置き換えられ、新しいセレクタになります.

.a.b.test,
.test.c{
    color: green;
}
.test{
    &:hover{
        color: red;
    }
}
.replace:extend(.test all){}

   ：

.a.b.test,
.test.c,
.a.b.replace,
.replace.c{
    color: green;
}
.test:hover,
.replace:hover{
    color: red;
}

この操作を非破壊的な検索とマッチングとして理解することができます
Extendでセレクタを使用して挿入(Selector Interpolation with Extend)
Extendは変数のあるセレクタと一致しません.セレクタに変数が含まれている場合、Extendは無視します.これは未定の特性ですが、簡単には変わりません.ただしextendは、挿入セレクタ(変数を含むセレクタA)を接続することができる.
変数を含むセレクタは一致しません.

@var: .bucket;
@{var}{  //      
    color: blue;
}
.some-class:extend(.bucket){}//     

ターゲットセレクタによるextendで変数を使用しても一致しません.

.bucket{
    color: blue;
}
.some-class:extend(@{var}){}//       
@var: .bucket;

上の2つは、次のようにコンパイルされます.

.bucket{
    color: blue;
}

ただし、:extendは挿入セレクタに接続できます.

.bucket{
    color: blue;
}
@{var}:extend(.bucket){}
@var: .test;

   ：
.bucket,.test{
    color: blue;
}

要約すると、Aセレクタには変数を含めることができますが、Bセレクタには変数を含めることはできません.
作用範囲/@media内のextend
1つのメディア宣言に書かれたextendは、同じメディア内のセレクタにのみ一致します.

@media print{
    .screenClass:extend(.selector){}
    .selector{
        color: black;
    }
}
.selector{
    color: red;
}
@media screen{
    .selector{
        color: blue;
    }
}

   ：

@meida print{
    .screenClass,.selector{
        color: black;
    }
}
.selector{
    color: red;
}
@media screen{
    .selector{
        color: blue;
    }
}

メディア宣言に書かれたextendは、ネストされたメディア宣言のセレクタに一致しません.

@media screen{
    .selectorClass:extend(.selector){}
    @media (min-width: 768px){
        .selector{
            color: blue;
        }    
    }
}

   ：

@media screen and (min-width: 768px){
    .selector{
        color: blue;
    }
}

外部extendは、内部のネストされたmediaのセレクタを含む範囲に制限なく一致することができます.

@media screen{
    .selector{
        color: blue;
    }
    @media (min-width: 768px){
        .selector{
            color: red;
        }
    }
}
.topLevel:extend(.selector){}
   ：
@media screen{
    .selector,
    .topLevel{
        color: blue;
    }
}
@media screen and (min-width: 768px){
    .selector,
    .topLevel{
        color: red;
    }
}

はんぷくけんしゅつ
現在は重複検出機能はありません.

.alert,.widget{ ... }
.test:extend(.alert, .widget){}

   ：

.alert,.widget,.test,.test{ ... }

だからextendを使う時extendが同じ規則のセレクタを持つことに注意しなければなりません
extendの使用状況

の一般的な使用状況

一般的な使用例は、クラスを追加しないようにするためです.

       animal
.animal{
    background-color: black;
    color: white;
}
         background-color         animal   ，  HTML      ：
bear
css        ：
.animal{
    background-color: black;
    color: white;
}
.bear{
    background-color: grey;
}
      less   extend，    HTML       ：
bear
less   ：
.animal{
    background-color: black;
    color: white;
}
.bear{
    &:extend(.animal);
    background-color: grey;
}

cssサイズを減少

mixinはすべてのプロパティを新しいセレクタにコピーし、不要な繰り返しをもたらします.したがって、mixinの代わりにextendを使用して、新しいセレクタに使用したいプロパティを追加し、cssコードを減らすことができます.mixinの使用:

.mine{
    color: #fff;
    font-size: 16px;
}
.test1{
    .mine;
}
.test2{
    .mine;
}

   ：
.mine{
    color: #fff;
    font-size: 16px;
}
.test1{
    color: #fff;
    font-size: 16px;
}
.test2{
    color: #fff;
    font-size: 16px;
}

extendの使用:

.mine{
    color: #fff;
    font-size: 16px;
}
.test1{
    &:extend(.mine);
}
.test2{
    &:extend(.mine);
}

   ：
.mine,
.test1,
.test2{
    color: #fff;
    font-size: 16px;
}

組み合わせスタイル/より先進的なmixin

もう1つの使用状況はmixinの代替方法として、mixinはアーカイブのセレクタでしか使用できないため、HTMLに2つの異なるブロック(block)があるが、同じスタイルを適用する必要がある場合は、extendを使用して2つのブロック要素をリンクすることができます.

li.list >a{ ... }
button.list-style{
    &:extend(li.list>a);
}