LESS-ミックスイン

ミックスインはプログラミング言語の関数に似ています。ミックスインは、あるクラスのプロパティを別のクラスに使用できるようにするCSSプロパティのグループであり、プロパティとしてクラス名が含まれています。LESSでは、クラスまたはIDセレクターを使用してCSSスタイルと同じ方法でミックスインを宣言できます。複数の値を格納でき、必要に応じてコードで再利用できます。

次の表は、LESSミックスインの使用法を詳細に示しています。

シニア番号 Mixinsの使用法と説明
1 ミックスインを出力しない

かっこを後ろに置くだけで、出力でミックスインを非表示にすることができます。

2 Mixinsのセレクター

ミックスインには、プロパティだけでなく、セレクターも含めることができます。

3 名前空間

名前空間は、ミックスインを共通の名前でグループ化するために使用されます。

4 保護された名前空間

ガードが名前空間に適用されると、それによって定義されたミックスインは、ガード条件がtrueを返した場合にのみ使用されます。

5 !importantキーワード

!重要なキーワードは、特定のプロパティをオーバーライドするために使用されます。

次の例は、LESSファイルでのミックスインの使用を示しています-

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

次に、style.lessファイルを作成します。

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

次のコマンドを使用して、style.lessstyle.cssにコンパイルできます。

lessc style.less style.css

上記のコマンドを実行します。次のコードでstyle.cssファイルを自動的に作成します-

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

出力

上記のコードがどのように機能するかを確認するには、次の手順に従ってください-

  • 上記のhtmlコードをに保存します less_mixins.html ファイル。

  • このHTMLファイルをブラウザで開くと、次の出力が表示されます。

ミックスインを呼び出す場合、括弧はオプションです。上記の例では、両方のステートメント.p1(); そして .p1; 同じことをします。