LESS-延長

Extendは、以下を使用して1つのセレクターで他のセレクタースタイルを拡張するLESS疑似クラスです。 :extend セレクタ。

例

次の例は、LESSファイルでのextendの使用を示しています-

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

次に、style.lessファイルを作成します。

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

次のコマンドを使用して、extend.lessファイルをextend.cssにコンパイルできます。

lessc style.less style.css

上記のコマンドを実行します。次のコードでstyle.cssファイルを自動的に作成します-

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

出力

上記のコードがどのように機能するかを確認するには、次の手順に従ってください-

上記のhtmlコードをに保存します extend_syntax.htm ファイル。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

構文の拡張

Extendはルールセットに配置されるか、セレクターにアタッチされます。これは、コンマで区切られた1つ以上のクラスを含む疑似クラスに似ています。オプションのキーワードを使用するall、各セレクターをフォローできます。

例

次の例は、LESSファイルでの拡張構文の使用を示しています-

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

次に、style.lessファイルを作成します。

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

次のコマンドを使用して、style.lessファイルをstyle.cssにコンパイルできます。

lessc style.less style.css

上記のコマンドを実行します。次のコードでstyle.cssファイルを自動的に作成します-

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

出力

上記のコードがどのように機能するかを確認するには、次の手順に従ってください-

上記のhtmlコードをに保存します extend_syntax.htm ファイル。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

次の表に、LESS-で使用できるすべてのタイプの拡張構文を示します。

シニア番号	タイプと説明
1	セレクターに取り付けられた延長 Extendは、セレクターをパラメーターとして持つ疑似クラスに似たセレクターに接続されています。
2	ルールセット内を拡張するザ・ &:extend(selector) 構文は、ルールセットの本体内に配置できます。
3	ネストされたセレクターの拡張ネストされたセレクターは、拡張セレクターを使用して照合されます。
4	Extendとの完全一致デフォルトでは、 extend セレクター間の完全一致を探します。
5	n番目の式 n番目の式の形式は、それ以外の拡張では重要です。それ以外の場合は、セレクターを異なるものとして扱います。
6	「すべて」を拡張するキーワードallがついに識別されたときextend 引数の場合、LESSは別のセレクターの一部としてそのセレクターと一致します。
7	Extendを使用したセレクター補間ザ・ extend 補間セレクターに接続できます。
8	@media内のスコープ/拡張 Extendは、同じメディア宣言内に存在するセレクターのみに一致します。
9	重複の検出セレクターの重複は検出できません。

Extendのユースケースの種類は次のとおりです

シニア番号	タイプと説明
1	古典的なユースケース LESSに基本クラスを追加しないようにするために、従来のユースケースが使用されます。
2	CSSサイズの縮小 Extendは、使用するプロパティまでセレクターを移動するために使用されます。これは、cssで生成されたコードを減らすのに役立ちます。
3	スタイルの組み合わせ/より高度なミックスイン extendsを使用すると、特定のセレクターの同じスタイルを他のセレクターに組み合わせることができます。

シニア番号	タイプと説明
1	セレクターに取り付けられた延長 Extendは、セレクターをパラメーターとして持つ疑似クラスに似たセレクターに接続されています。
2	ルールセット内を拡張するザ・ &:extend(selector) 構文は、ルールセットの本体内に配置できます。
3	ネストされたセレクターの拡張ネストされたセレクターは、拡張セレクターを使用して照合されます。
4	Extendとの完全一致デフォルトでは、 extend セレクター間の完全一致を探します。
5	n番目の式 n番目の式の形式は、それ以外の拡張では重要です。それ以外の場合は、セレクターを異なるものとして扱います。
6	「すべて」を拡張するキーワードallがついに識別されたときextend 引数の場合、LESSは別のセレクターの一部としてそのセレクターと一致します。
7	Extendを使用したセレクター補間ザ・ extend 補間セレクターに接続できます。
8	@media内のスコープ/拡張 Extendは、同じメディア宣言内に存在するセレクターのみに一致します。
9	重複の検出セレクターの重複は検出できません。