Less-extend
少ない-拡張
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ファイルをブラウザで開くと、次の出力が表示されます。
拡張構文
拡張は、ルールセットに配置されるか、セレクタに添付されます。 これは、コンマで区切られた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で使用できるすべての種類の拡張構文を示しています-
Sr.No. | Types & Description |
---|---|
1 |
Extendは、セレクターをパラメーターとして持つ擬似クラスに似たセレクターに接続されます。 |
2 |
|
3 |
ネストされたセレクターは、_extend_セレクターを使用して照合されます。 |
4 |
デフォルトでは、 extend はセレクター間の完全一致を検索します。 |
5 |
それ以外の場合、n番目の式の形式は拡張において重要であり、セレクタを異なるものとして扱います。 |
6 |
|
7 |
Selector Interpolation with Extend
|
8 |
Extendは、同じメディア宣言内に存在するセレクターのみに一致します。 |
9 |
セレクターの重複を検出できません。 |
以下は、拡張のユースケースのタイプです
Sr.No. | Types & Description |
---|---|
1 |
クラシックユースケースは、LESSに基本クラスを追加しないようにするために使用されます。 |
2 |
Extendは、使用するプロパティまでセレクタを移動するために使用されます。これにより、CSSで生成されたコードを削減できます。 |
3 |
Combining Styles/A More Advanced Mixin extendを使用すると、特定のセレクターの同じスタイルを他のセレクターに結合できます。 |