Less-classic-use-case
提供:Dev Guides
LESS-クラシックユースケース
説明
従来のユースケースは、LESSに基本クラスを追加しないようにするために使用されます。 同じ値が他のクラス内でオーバーライドされると、基本クラスに書き込まれた値は回避されます。
例
以下の例は、LESSファイルでの古典的なユースケースの使用を説明しています-
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>
</div>
</body>
</html>
次に、_style.less_ファイルを作成します。
style.less
.style {
font-family: "Times New Roman";
font-style:italic;
}
.cont {
&:extend(.style);
font-family: "Comic Sans MS";
}
次のコマンドを使用して、_style.less_ファイルを_style.css_にコンパイルできます-
lessc style.less style.css
上記のコマンドを実行すると、次のコードで_style.css_ファイルが自動的に作成されます-
style.css
.style,
.cont {
font-family: "Times New Roman";
font-style: italic;
}
.cont {
font-family: "Comic Sans MS";
}
出力
上記のコードがどのように機能するかを確認するには、次の手順に従ってください-
- 上記のHTMLコードを extend_syntax ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次の出力が表示されます。