Less-extend-all
提供:Dev Guides
少ない-「すべて」を拡張
説明
*extend* 引数でキーワード_all_が最後に識別されると、LESSは別のセレクターの一部としてそのセレクターと一致します。 一致したセレクター部分は拡張に置き換えられ、新しいセレクターが作成されます。
例
次の例は、LESSファイルですべてのキーワードを使用する方法を示しています-
extend_all
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css"/>
</head>
<body>
<div class = "container">
<h3>Welcome to finddevguides</h3>
<div class = "style">
<ul class="nav">
<li>SASS </li>
<li>LESS</li>
</ul>
</div>
</div>
</body>
</html>
次に、_style.less_ファイルを作成します。
style.less
.style.nav,
.nav h3 {
color: orange;
}
.nav {
&:hover {
color: green;
}
}
.container:extend(.nav all) {}
次のコマンドを使用して、_style.less_ファイルを_style.css_にコンパイルできます-
lessc style.less style.css
上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-
style.css
.style.nav,
.nav h3,
.style.container,
.container h3 {
color: orange;
}
.nav:hover,
.container:hover {
color: green;
}
出力
上記のコードがどのように機能するかを確認するには、次の手順に従ってください-
- 上記のHTMLコードを extend_all ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次の出力が表示されます。