Less-passing-rulesets-to-mixins
LESS-ルールセットをMixinに渡す
説明
分離されたルールセットには、プロパティ、ネストされたルールセット、変数宣言、ミックスインなどのルールセットが含まれます。 変数に格納され、別の構造に含まれます。ルールセットのすべてのプロパティがその構造にコピーされます。
例
次の例は、LESSファイルのmixinにルールセットを渡す方法を示しています-
passing_ruleset
<!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
@detached-ruleset: {
.mixin() {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
};
.cont {
@detached-ruleset();
.mixin();
}次のコマンドを使用して、_style.less_ファイルを_style.css_にコンパイルできます-
lessc style.less style.css上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-
style.css
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}出力
上記のコードがどのように機能するかを確認するには、次の手順に従ってください-
- 上記のHTMLコードを passing_ruleset ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次の出力が表示されます。
スコーピング
切り離されたルールセット内のすべての変数とミックスインは、ルールセットが呼び出されたり定義されたりする場所であればどこでも使用できます。 それ以外の場合、呼び出し元と定義スコープの両方がデフォルトで利用可能です。 両方のスコープに同じミックスインまたは変数が含まれる場合、宣言スコープが優先されます。 分離されたルールセット本体は、宣言スコープで定義されます。 切り離されたルールセットが1つの変数から別の変数にコピーされた後、スコープは変更されません。
次の表は、スコープのすべてのタイプを示しています-
| Sr.No. | Types & Description |
|---|---|
| 1 |
Definition and Caller Scope Visibility 変数とミックスインは、分離されたルールセット内で定義されます。 |
| 2 |
Referencing Won’t Modify Detached Ruleset Scope 参照を与えるだけで、ルールセットは新しいスコープにアクセスしません。 |
| 3 |
Unlocking Will Modify Detached Ruleset Scope 切り離されたルールセットは、インポートすることでスコープにアクセスできます。 |
