LESS-ルールセットをミックスインに渡す

説明

分離されたルールセットには、プロパティ、ネストされたルールセット、変数宣言、ミックスインなどのルールセットが含まれます。これは変数に格納され、別の構造に含まれます。ルールセットのすべてのプロパティがその構造にコピーされます。

例

次の例は、LESSファイルのミックスインにルールセットを渡す方法を示しています-

pass_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</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.htm ファイル。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

スコープ

デタッチされたルールセット内のすべての変数とミックスインは、ルールセットが呼び出された場所または定義された場所で使用できます。それ以外の場合は、呼び出し元と定義スコープの両方がデフォルトで使用可能です。両方のスコープに同じミックスインまたは変数が含まれている場合、宣言スコープが優先されます。分離されたルールセット本体は、宣言スコープで定義されます。切り離されたルールセットが1つの変数から別の変数にコピーされた後、スコープは変更されません。

次の表に、すべてのタイプのスコープを示します。

シニア番号	タイプと説明
1	定義と発信者スコープの可視性変数とミックスインは、デタッチされたルールセット内で定義されます。
2	参照すると、切り離されたルールセットスコープは変更されません参照を与えるだけで、ルールセットは新しいスコープにアクセスしません。
3	ロックを解除すると、切り離されたルールセットのスコープが変更されます切り離されたルールセットは、スコープにインポートされることでスコープにアクセスできます。

シニア番号	タイプと説明
1	定義と発信者スコープの可視性変数とミックスインは、デタッチされたルールセット内で定義されます。
2	参照すると、切り離されたルールセットスコープは変更されません参照を与えるだけで、ルールセットは新しいスコープにアクセスしません。
3	ロックを解除すると、切り離されたルールセットのスコープが変更されます切り離されたルールセットは、スコープにインポートされることでスコープにアクセスできます。