Less-combining-styles-more-advanced-mixin
提供:Dev Guides
スタイルの組み合わせ/より高度なミックスイン
説明
*Extend* を使用すると、特定のセレクタの同じスタイルを他のセレクタに結合できます。
例
次の例では、LESSファイルでのスタイルmixinの組み合わせの使用について説明します-
extend_syntax
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css"/>
</head>
<body>
<div class = "cont">
<h2>Welcome to finddevguides</h2>
<p>The largest Tutorials Library on the web.</p>
<ul class = "nav">
<li>HTML</li>
<li>SASS</li>
<li>LESS</li>
</ul>
</div>
</body>
</html>
次に、_style.less_ファイルを作成します。
style.less
ul.nav > li {
background-color: #6DE6E6;
color: black;
}
.cont {
&:extend(ul.nav > li);
}
次のコマンドを使用して、_style.less_ファイルを_style.css_にコンパイルできます-
lessc style.less style.css
上記のコマンドを実行すると、次のコードで_style.css_ファイルが自動的に作成されます-
style.css
ul.nav > li,
.cont {
background-color: #6DE6E6;
color: black;
}
出力
上記のコードがどのように機能するかを確認するには、次の手順に従ってください-
- 上記のHTMLコードを extend_syntax ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次の出力が表示されます。