少ない-拡張

Extendは、*：extend *セレクターを使用して1つのセレクター内の他のセレクタースタイルを拡張するLESS擬似クラスです。

例

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

extend_syntax

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

   <body>
      <div class = "style">
         <h2>Welcome to finddevguides</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 ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

Less Extend

拡張構文

拡張は、ルールセットに配置されるか、セレクタに添付されます。これは、コンマで区切られた1つ以上のクラスを含む擬似クラスに似ています。オプションのキーワード all を使用すると、各セレクターを追跡できます。

例

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

extend_syntax

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

   <body>
      <div class = "style">
         <h2>Welcome to finddevguides</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 ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

Less Extend

次の表は、LESSで使用できるすべての種類の拡張構文を示しています-

Sr.No.	Types & Description
1	Extend Attached to Selector Extendは、セレクターをパラメーターとして持つ擬似クラスに似たセレクターに接続されます。
2	Extend Inside Ruleset ＆：extend（selector）*構文は、ルールセットの本体内に配置できます。
3	Extending Nested Selectors ネストされたセレクターは、_extend_セレクターを使用して照合されます。
4	Exact Matching with Extend デフォルトでは、 extend はセレクター間の完全一致を検索します。
5	nth Expression それ以外の場合、n番目の式の形式は拡張において重要であり、セレクタを異なるものとして扱います。
6	Extend "all" extend* 引数でキーワード_all_が最後に識別されると、LESSは別のセレクターの一部としてそのセレクターと一致します。
7	Selector Interpolation with Extend extend* は、補間セレクターに接続できます。
8	Scoping/Extend inside @media Extendは、同じメディア宣言内に存在するセレクターのみに一致します。
9	Duplication Detection セレクターの重複を検出できません。

以下は、拡張のユースケースのタイプです

Sr.No.

Types & Description

1

Classic Use Case

クラシックユースケースは、LESSに基本クラスを追加しないようにするために使用されます。

2

Reducing CSS Size

Extendは、使用するプロパティまでセレクタを移動するために使用されます。これにより、CSSで生成されたコードを削減できます。

3

Combining Styles/A More Advanced Mixin

extendを使用すると、特定のセレクターの同じスタイルを他のセレクターに結合できます。

Less-extend

少ない-拡張

例

extend_syntax

style.less

style.css

出力

拡張構文

例

extend_syntax

style.less

style.css

出力

目次