LESS-クイックガイド

LESSは、Webサイトのカスタマイズ、管理、および再利用可能なスタイルシートを可能にするCSSプリプロセッサです。LESSは、CSSの機能を拡張する動的なスタイルシート言語です。LESSはクロスブラウザにも対応しています。

CSSプリプロセッサは、CSSを拡張し、通常のCSS構文にコンパイルされるスクリプト言語であるため、Webブラウザで読み取ることができます。変数、関数、ミックスイン、操作などの機能を提供し、動的なCSSを構築できるようにします。

なぜ少ないのですか？

なぜLESSを使用するのかを理解しましょう。

  • LESSは、よりクリーンでクロスブラウザー対応のCSSをより速く簡単に作成することをサポートします。

  • LESSはJavaScriptで設計されており、他のCSSプリプロセッサよりも高速にコンパイルされるライブで使用するためにも作成されています。

  • LESSは、コードをモジュール方式で保持します。これは、読み取り可能で簡単に変更できるようにすることで非常に重要です。

  • LESS変数を使用すると、メンテナンスを高速化できます。

歴史

LESSはによって設計されました Alexis SellierLESSはオープンソースです。LESSの最初のバージョンはRubyで書かれました。それ以降のバージョンでは、Rubyの使用はJavaScriptに置き換えられました。

特徴

  • よりクリーンで読みやすいコードは、整理された方法で記述できます。

  • スタイルを定義して、コード全体で再利用できます。

  • LESSはJavaScriptに基づいており、CSSのスーパーセットです。

  • LESSは、コードの冗長性の問題を解決するアジャイルツールです。

利点

  • LESSは、ブラウザー間で機能するCSSを簡単に生成します。

  • LESSを使用すると、ネストを使用して、より適切に整理されたコードを記述できます。

  • 変数を使用することで、メンテナンスをより迅速に行うことができます。

  • LESSを使用すると、ルールセットでクラスを参照することにより、クラス全体を簡単に再利用できます。

  • LESSは、コーディングを高速化し、時間を節約する操作の使用を提供します。

短所

  • CSSの前処理に慣れていないかどうかを知るには時間がかかります。

  • モジュール間の緊密な結合により、依存するモジュールを再利用および/またはテストするために、より多くの努力を払う必要があります。

  • LESSは、フレームワークCompass、Gravity、Susyで構成されるSASSのような古いプリプロセッサと比較してフレームワークが少なくなっています。

この章では、LESSのインストール方法を段階的に理解します。

LESSのシステム要件

  • Operating System −クロスプラットフォーム

  • Browser Support − IE（Internet Explorer 8以降）、Firefox、Google Chrome、Safari。

LESSのインストール

LESSのインストールについて理解しましょう。

Step 1 −必要 NodeJsLESSの例を実行します。NodeJをダウンロードするには、リンクを開きますhttps://nodejs.org/en/、以下のような画面が表示されます-

zipファイルの最新機能バージョンをダウンロードします。

Step 2−セットアップを実行して、Node.jsをシステムにインストールします。

Step 3−次に、NPM（Node Package Manager）を介してサーバーにLESSをインストールします。コマンドプロンプトで次のコマンドを実行します。

npm install -g less

Step 4 − LESSのインストールが成功すると、コマンドプロンプトに次の行が表示されます−

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

例

以下は、LESSの簡単な例です。

hello.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

ここで、CSSに非常によく似たファイルstyle.lessを作成しましょう。唯一の違いは、.less拡張子で保存されることです。.htmlと.lessの両方のファイルをフォルダー内に作成する必要がありますnodejs。

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

次のコマンドを使用して、style.lessファイルをstyle.cssにコンパイルします-

lessc style.less style.css

上記のコマンドを実行すると、style.cssファイルが自動的に作成されます。LESSファイルを変更するときはいつでも、上記のコマンドをで実行する必要があります。cmdその後、style.cssファイルが更新されます。

style.cssには、あなたが上記のコマンドを実行すると、ファイルには、次のコードを持っています-

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

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

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

説明

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

例

次の例は、LESSファイルでのネストされたルールの使用を示しています-

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

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

style.less

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

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

lessc style.less style.css

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

style.css

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

出力

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

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

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

説明

メディアやキーフレームなどのディレクティブは、セレクターをネストするのと同じ方法でネストできます。ディレクティブを上に配置すると、その相対要素はルールセット内で変更されません。これはバブリングプロセスとして知られています。

例

次の例は、ネストされたディレクティブの使用とLESSファイルでのバブリングを示しています。

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

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

lessc style.less style.css

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

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

出力

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

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

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

説明

LESSは、プラス（+）、マイナス（-）、乗算（*）、除算（/）などの一部の算術演算をサポートし、任意の数値、色、または変数を操作できます。変数を使用していて、単純な数学に取り組みたいと感じる場合、操作によって多くの時間を節約できます。

例

次の例は、LESSファイルでの操作の使用法を示しています-

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

style.less

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

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

lessc style.less style.css

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

style.css

.myclass {
   font-size: 20px;
   color: green;
}

出力

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

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

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

説明

セレクターを動的に構築し、プロパティまたは変数値を任意の文字列として使用します。

例

次の例は、LESSファイルでのエスケープの使用を示しています-

<html>
   <head>
      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

style.less

p {
   color: ~"green";
}

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

lessc style.less style.css

上記のコマンドを実行すると、次のコードでstyle.cssファイルが自動的に作成されます-

style.css

p {
   color: green;
}

〜 "some_text"内に記述されたものはすべて、LESSコードをCSSコードにコンパイルした後、some_textとして表示されます。

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

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

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

説明

LESSは、値の操作でJavaScriptコードをマップし、事前定義された関数を使用してスタイルシートのHTML要素の側面を操作します。ラウンド関数、フロア関数、天井関数、パーセンテージ関数など、色を操作するためのいくつかの関数を提供します。

例

次の例は、LESSファイルの関数の使用法を示しています-

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

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

lessc style.less style.css

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

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

出力

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

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

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

説明

名前空間は、ミックスインを共通の名前でグループ化するために使用されます。名前空間を使用すると、名前の競合を回避し、外部からのミックスインのグループをカプセル化できます。

例

次の例は、LESSファイルでの名前空間とアクセサーの使用を示しています-

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

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

lessc style.less style.css

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

style.css

.myclass {
   font-size: 20px;
   color: green;
}

出力

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

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

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

説明

変数スコープは、使用可能な変数の場所を指定します。変数はローカルスコープから検索され、使用できない場合、コンパイラーは親スコープから検索します。

例

次の例は、LESSファイルでの名前空間とアクセサーの使用を示しています-

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

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

lessc style.less style.css

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

style.css

.myclass {
   font-size: 20px;
   color: green;
}

出力

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

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

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

説明

コメントにより、ユーザーはコードを明確で理解しやすくなります。コードではブロックスタイルとインラインコメントの両方を使用できますが、LESSコードをコンパイルすると、単一行コメントはCSSファイルに表示されません。

例

次の例は、LESSファイルでのコメントの使用を示しています-

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

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

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

style.less

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

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

lessc style.less style.css

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

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

出力

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

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

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

説明

LESSまたはCSSファイルの内容をインポートするために使用されます。

例

次の例は、LESSファイルでのインポートの使用法を示しています-

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

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

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

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

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

style.less

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

myfile.lessのにインポートされたファイルstyle.lessパスからhttps://www.tutorialspoint.com/less/myfile.less

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

lessc style.less style.css

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

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

出力

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

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

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

この章では、LESSの変数について説明します。LESSを使用すると、変数を@記号で定義できます。変数の割り当ては、Aで行われますcolon(:)。

次の表は、LESS変数の使用法を詳細に示しています。

シニア番号 変数の使用法と説明
1 概要概要

変数を使用することで、同じ値を何度も繰り返すことを回避できます。
2 可変補間

変数は、セレクター名、プロパティ名、URL、@ importステートメントなどの他の場所でも使用できます。
3 変数名

値で構成される変数名で変数を定義できます。
4 遅延読み込み

遅延読み込みでは、変数は使用されていない場合でも使用できます。
5 デフォルト変数

デフォルト変数には、まだ設定されていない場合にのみ変数を設定する機能があります。変数は後で定義することで簡単にオーバーライドできるため、この機能は必要ありません。

Extendは、以下を使用して1つのセレクターで他のセレクタースタイルを拡張するLESS疑似クラスです。 :extend セレクタ。

例

次の例は、LESSファイルでのextendの使用を示しています-

extend_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

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

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

次のコマンドを使用して、extend.lessファイルをextend.cssにコンパイルできます。

lessc style.less style.css

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

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

出力

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

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

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

構文の拡張

Extendはルールセットに配置されるか、セレクターにアタッチされます。これは、コンマで区切られた1つ以上のクラスを含む疑似クラスに似ています。オプションのキーワードを使用するall、各セレクターをフォローできます。

例

次の例は、LESSファイルでの拡張構文の使用を示しています-

extend_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

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

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

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

lessc style.less style.css

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

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

出力

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

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

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

次の表に、LESS-で使用できるすべてのタイプの拡張構文を示します。

シニア番号 タイプと説明
1 セレクターに取り付けられた延長

Extendは、セレクターをパラメーターとして持つ疑似クラスに似たセレクターに接続されています。
2 ルールセット内を拡張する

ザ・ &:extend(selector) 構文は、ルールセットの本体内に配置できます。
3 ネストされたセレクターの拡張

ネストされたセレクターは、拡張セレクターを使用して照合されます。
4 Extendとの完全一致

デフォルトでは、 extend セレクター間の完全一致を探します。
5 n番目の式

n番目の式の形式は、それ以外の拡張では重要です。それ以外の場合は、セレクターを異なるものとして扱います。
6 「すべて」を拡張する

キーワードallがついに識別されたときextend 引数の場合、LESSは別のセレクターの一部としてそのセレクターと一致します。
7 Extendを使用したセレクター補間

ザ・ extend 補間セレクターに接続できます。
8 @media内のスコープ/拡張

Extendは、同じメディア宣言内に存在するセレクターのみに一致します。
9 重複の検出

セレクターの重複は検出できません。

Extendのユースケースの種類は次のとおりです

シニア番号 タイプと説明
1 古典的なユースケース

LESSに基本クラスが追加されないようにするために、従来のユースケースが使用されます。
2 CSSサイズの縮小

Extendは、使用するプロパティまでセレクターを移動するために使用されます。これは、cssで生成されたコードを減らすのに役立ちます。
3 スタイルの組み合わせ/より高度なミックスイン

extendsを使用すると、特定のセレクターの同じスタイルを他のセレクターに組み合わせることができます。

ミックスインはプログラミング言語の関数に似ています。ミックスインは、あるクラスのプロパティを別のクラスに使用できるようにする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.lessをstyle.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; 同じことをします。

説明

パラメトリックミックスインは、引数とそのプロパティを取得してLESSの機能を拡張する1つ以上のパラメーターを使用して、別のブロックにミックスされたときにミックスイン出力をカスタマイズします。

たとえば、単純なLESSコードスニペットを考えてみましょう-

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

ここでは、パラメトリックミックスインを.borderとして使用し、幅、スタイル、色の3つのパラメーターを使用しています。これらのパラメーターを使用して、渡されたパラメーター値でミックスイン出力をカスタマイズできます。

次の表に、さまざまなタイプのパラメトリックミックスインとその説明を示します。

シニア番号 タイプと説明
1 複数のパラメーターを持つミックスイン

パラメータは、コンマまたはセミコロンを使用して区切ることができます。
2 名前付きパラメーター

ミックスインは、名前を使用して、位置の代わりにパラメーター値を提供します。
3 @arguments変数

ミックスインが呼び出されると、@ argumentsには渡されたすべての引数が含まれます。
4 高度な引数と@rest変数

Mixinは、を使用して可変数の引数を取ります ....。
5 パターンマッチング

パラメータを渡すことにより、ミックスインの動作を変更します。

この章では、の重要性を理解します Mixins as Functions。関数と同様に、ミックスインはネストでき、パラメーターを受け入れ、値を返すこともできます。

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

シニア番号 Mixinsの使用法と説明
1 Mixinスコープ

ミックスインは変数で構成されています。これらは発信者のスコープで使用でき、表示されます。
2 ミックスインと戻り値

ミックスインは関数に似ており、ミックスインで定義された変数は戻り値として動作します。
3 別のミックスイン内のミックスイン

ミックスインが別のミックスイン内で定義されている場合は常に、戻り値としても使用できます。

説明

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

例

次の例は、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 ロックを解除すると、切り離されたルールセットのスコープが変更されます

切り離されたルールセットは、スコープにインポートされることでスコープにアクセスできます。

説明

ザ・ @importディレクティブは、コード内のファイルをインポートするために使用されます。LESSコードをさまざまなファイルに分散し、コードの構造を簡単に維持できるようにします。@importステートメントはコードのどこにでも置くことができます。

たとえば、を使用してファイルをインポートできます @importキーワードとして@import "file_name.less"。

ファイル拡張子

−などのさまざまなファイル拡張子に応じて@importステートメントを使用できます。

  • .css拡張子を使用している場合、それはCSSと見なされ、@ importステートメントはそのまま残ります。

  • 他の拡張子が含まれている場合は、LESSと見なされ、インポートされます。

  • LESS拡張子がない場合は、インポートされたLESSファイルとして追加および含まれます。

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

例

次の例は、SCSSファイルでの変数の使用を示しています-

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

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

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

import_dir.less

.myline {
   font-size: 20px;
}

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

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

import_dir.lessのファイルがにインポートされますstyle.lessパスからファイルhttps://www.tutorialspoint.com/less/import_dir.less。

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

lessc style.less style.css

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

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

出力

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

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

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

この章では、の重要性を理解します Import Options以下で。LESSは@import スタイルシートがLESSスタイルシートとCSSスタイルシートの両方をインポートできるようにするステートメント。

次の表に、importステートメントに実装されるimportディレクティブを示します。

シニア番号 インポートオプションと説明
1 参照

LESSファイルは参照としてのみ使用され、出力されません。
2 列をなして

これにより、CSSを処理せずに出力にコピーできます。
3 もっと少なく

ファイル拡張子が何であれ、インポートされたファイルは通常のLESSファイルとして扱われます。
4 css

ファイル拡張子が何であれ、インポートされたファイルは通常のCSSファイルとして扱われます。
5 一度

ファイルは1回だけインポートされます。
6 複数

ファイルを複数回インポートします。
7 オプション

インポートするファイルが見つからなくても、コンパイルを続行します。

で複数のキーワードを使用できます @import ただし、キーワードを区切るにはコンマを使用する必要があります。

たとえば-

@import (less, optional) "custom.css";

説明

式の単純な値または引数の数を一致させたい場合は、ガードを利用できます。これはミックスイン宣言に関連付けられており、ミックスインに関連付けられている条件が含まれています。各ミックスインには、コンマで区切られた1つ以上のガードがあります。ガードは括弧で囲む必要があります。LESSは、代わりにガードされたミックスインを使用しますif/else ステートメントを作成し、計算を実行して、一致するミックスインを指定します。

次の表に、さまざまなタイプのミックスインガ​​ードとその説明を示します。

シニア番号 タイプと説明
1 ガード比較演算子

比較演算子（=）を使用して、数値、文字列、識別子などを比較できます。
2 論理演算子をガードする

andキーワードを使用して、ガード付きの論理演算子を回避できます。
3 型チェック機能

一致するミックスインの値型を決定するための組み込み関数が含まれています。
4 条件付きミックスイン

LESSは、デフォルトの関数を使用して、ミックスインを他のミキシングマッチと一致させます。

例

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

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

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

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

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

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

lessc style.less style.css

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

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

出力

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

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

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

説明

ガードは、式の単純な値または多数の引数を照合するために使用されます。これはCSSセレクターに適用されます。これは、ミックスインを宣言してすぐに呼び出すための構文です。うまく引き出すためにifタイプステートメント; 機能でこれに参加する&、複数のガードをグループ化できます。

例

次の例は、 css LESSファイルのガード-

css_guard.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

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

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

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

lessc style.less style.css

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

style.css

.style {
   background-color: blue;
   color: white;
}

出力

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

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

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

この章では、LESSでループがどのように機能するかを理解します。Loopsステートメントを使用すると、ステートメントまたはステートメントのグループを複数回実行できます。再帰的ミックスインをと組み合わせると、さまざまな反復/ループ構造を作成できます。Guard Expressions そして Pattern Matching。

例

次の例は、LESSファイルでのループの使用を示しています-

loop_example.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

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

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

lessc style.less style.css

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

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

出力

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

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

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

説明

LESSのこの機能を使用すると、単一のプロパティを使用して、複数のプロパティからコンマまたはスペースで区切られたリストに値を追加できます。背景と変換のプロパティに使用できます。

次の表に、マージ機能でサポートされている2種類の機能を示します。

シニア番号 タイプと説明
1 コンマ

最後にプロパティ値を追加します。
2 スペース

スペースでプロパティ値を追加します。

この章では、その方法を理解しましょう Parent Selectors作業。を使用して親セレクターを参照することができます&（アンパサンド）演算子。ネストされたルールの親セレクターは、& 演算子であり、変更クラスまたは疑似クラスを既存のセレクターに適用するときに使用されます。

次の表に、親セレクターのタイプを示します。

シニア番号 タイプと説明
1 複数＆

ザ・ & 最も近いセレクターとすべての親セレクターを表します。
2 セレクターの順序の変更

セレクターの順序が変更された場合、継承された（親）セレクターの前にセレクターを付けると便利です。
3 Combinatorial Explosion

ザ・ & また、コンマで区切られたリスト内のセレクターの可能なすべての順列を生成することもできます。

例

次の例は、LESSファイルでの親セレクターの使用を示しています-

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

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

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

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

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

lessc style.less style.css

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

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

上記の例では、 & セレクターを指します a。

出力

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

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

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

親セレクターデフォルト以外の方法で、ネストされたルールのセレクターを結合する必要がある場合、オペレータは、のような多くの用途があります。別の典型的な使用法&クラス名を繰り返し生成することです。詳細については、ここをクリックしてください。

その他の関数は、異なる種類の関数のグループで構成されています。

次の表に、その他の関数のすべてのタイプを示します。

シニア番号 機能と説明
1 色

色を表す文字列です。
2 画像サイズ

これは、ファイルから画像の寸法を調べるために使用されます。
3 画像-幅

ファイルから画像の幅を調べます。
4 画像-高さ

ファイルから画像の高さを調べます。
5 変換する

数値は、ある単位から別の単位に変換されます。
6 データ-uri

データURIは、Webページ上でリソースをインラインで取得するURI（Uniform Resource Identifier）スキーマです。
7 デフォルト

デフォルト関数は、ガード条件内で使用可能であり、他のミックスインと一致しない場合にのみtrueを返します。
8 単位

デフォルト関数は、ガード条件内で使用可能であり、他のミックスインと一致しない場合にのみtrueを返します
9 単位を取得

get --unit関数は、引数が存在する単位を数値と単位で返します。
10 svg-グラデーション

svg-gradientは、ある色から別の色への遷移です。同じ要素に多くの色を追加できます。

説明

Lessは、以下にリストされている文字列関数の一部をサポートします-

  • escape
  • e
  • ％ フォーマット
  • replace

次の表に、上記の文字列関数と説明を示します。

シニア番号 タイプと説明 例
1

Escape

特殊文字のURLエンコードを使用して、文字列または情報をエンコードします。次のような一部の文字をエンコードできませんでした, 、 / 、 ? 、 @ 、 & 、 + 、 ~ 、 ! 、 $ 、 ' エンコードできる文字など \ 、 # 、 ^ 、 ( 、 ) 、 { 、 } 、 : 、 > 、 < 、 ] 、 [ そして =。

 
escape("Hello!! welcome to Tutorialspoint!")

エスケープ文字列を−として出力します

Hello%21%21%20welcome%20to%20Tutorialspoint%21
2

e

これは、文字列をパラメータとして使用し、引用符なしで情報を返す文字列関数です。これは、〜「一部のコンテンツ」でエスケープされた値と数値をパラメーターとして使用するCSSエスケープです。

 
filter: e("Hello!! welcome to Tutorialspoint!");

エスケープ文字列を−として出力します

filter: Hello!! welcome to Tutorialspoint!;
3

% format

この関数は文字列をフォーマットします。次の形式で書くことができます-

%(string, arguments ...)
 
format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

フォーマットされた文字列を-として出力します

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4

replace

文字列内のテキストを置き換えるために使用されます。それはいくつかのパラメータを使用します-

  • string −文字列を検索し、で置き換えます。

  • pattern −正規表現パターンを検索します。

  • replacement −パターンに一致する文字列を置き換えます。

  • flags −これらはオプションの正規表現フラグです。

 
replace("Welcome, val?", "val\?", "to Tutorialspoint!");

文字列を-として置き換えます

"Welcome, to Tutorialspoint!"

説明

LESSは、リストの長さとリスト内の値の位置を指定するために使用されるリスト関数で構成されます。

次の表に、LESS-で使用されるリスト関数を示します。

シニア番号 機能と説明
1 長さ

パラメータとして、コンマまたはスペースで区切られた値のリストを取ります。
2 エキス

リスト内の指定された位置の値を返します。

説明

数学関数には、丸め、平方根、べき級数、法、パーセンテージなどの数値演算を実行するために使用されるメソッドが含まれています。

次の表は、LESS −で使用される数学関数を示しています。

シニア番号 機能と説明 例
1

ceil

数値を次に大きい整数に切り上げます。

 
ceil(0.7)

数値を-に丸めます

1
2

floor

数値を次に小さい整数に切り捨てます。

 
floor(3.3)

数値を-に丸めます

3
3

percentage

浮動小数点数をパーセンテージ文字列に変換します。

 
percentage(0.2)

数値を次のようにパーセンテージ文字列に変換します-

20%
4

round

浮動小数点数を丸めます。

 
round(3.77)

数値を-として丸め値に変換します

4
5

sqrt

数値の平方根を返します。

 
sqrt(25)

数値の平方根を-として定義します

5
6

abs

数値の絶対値を提供します。

 
abs(30ft)

絶対値を-として表示します

30ft
7

sin

数値のラジアンを返します。

 
sin(2)

サイン値を-として計算します

0.90929742682
8

asin

-pi / 2とpi / 2の間の値を返す数値のアークサイン（サインの逆）を指定します。

 
asin(1)

asin値を-として計算します

1.5707963267948966
9

cos

指定された値のコサインを返し、単位のない数値のラジアンを決定します。

 
cos(2)

cos値を-として計算します

-0.4161468365471424
10

acos

これは、0からpiまでの値を返す数値のアークコサイン（コサインの逆数）を指定します。

 
acos(1)

acos値を-として計算します

0
11

tan

数値の接線を指定します。

 
tan(60)

tan値を-として計算します

0.320040389379563
12

atan

指定された数のアークタンジェント（タンジェントの逆）を指定します。

 
atan(1)

atan値を-として表示します

0.7853981633974483
13

pi

円周率の値を返します。

 
pi()

円周率の値を-として決定します

3.141592653589793
14

pow

これは、最初の引数の値を2番目の引数の累乗で指定します。

 
pow(3,3)

電力値を-として指定します

27
15

mod

2番目の引数に対する最初の引数のモジュラスを返します。また、負の浮動小数点数も処理します。

 
mod(7,3)

モジュラス値を-として返します

1
16

min

1つ以上の引数の最小値を指定します。

 
min(70,30,45,20)

最小値を-として返します

20
17

max

1つ以上の引数の最大値を指定します。

 
max(70,30,45,20)

最大値を−として返します

70

この章では、の重要性を理解します Type Functions以下で。これらは、値のタイプを決定するために使用されます。

次の表に、LESSで使用されるタイプ関数を示します。

シニア番号 タイプ機能と説明 例
1

isnumber

パラメータとして値を取り、数値の場合はtrueを返し、それ以外の場合はfalseを返します。

 
isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false
2

isstring

これは、パラメータとして値を取得して返す真、それは文字列かだ場合、偽をそう。

 
isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false
3

iscolor

パラメータとして値を取り、値が色の場合はtrueを返し、そうでない場合はfalseを返します。

 
iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false
4

iskeyword

パラメータとして値を取り、valueがキーワードの場合はtrueを返し、そうでない場合はfalseを返します。

 
iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false
5

isurl

パラメータとして値を取り、値がURLの場合はtrueを返し、そうでない場合はfalseを返します。

 
isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false
6

ispixel

パラメータとして値を取り、値がピクセル単位の数値の場合はtrueを返し、それ以外の場合はfalseを返します。

 
ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false
7

isem

パラメータとして値を取り、valueがem値の場合はtrueを返し、そうでない場合はfalseを返します。

 
isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false
8

ispercentage

パラメータとして値を取り、値がパーセンテージの場合はtrueを返し、値がパーセンテージでない場合はfalseを返します。

 
ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false
9

isunit

値がパラメーターとして指定された指定単位の数値である場合はtrueを返し、値が指定単位の数値でない場合はfalseを返します。

 
isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false
10

isruleset

パラメータとして値を取り、値がルールセットの場合はtrueを返し、それ以外の場合はfalseを返します。

 
@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

説明

LESSは、さまざまな方法で色を変更および操作するための便利な色関数を多数提供します。LESSは、以下の表に示すように、いくつかの色定義関数をサポートしています。

シニア番号 機能と説明 例
1

rgb

赤、緑、青の値から色を作成します。以下のパラメータがあります-

  • red − 0〜255の整数、または0〜100％のパーセンテージが含まれます。

  • green − 0〜255の整数、または0〜100％のパーセンテージが含まれます。

  • blue − 0〜255の整数、または0〜100％のパーセンテージが含まれます。

 
rgb(220,20,60)

RGB値で色を-として変換します

#dc143c
2

rgba

赤、緑、青、アルファの値から色を決定します。次のパラメータがあります-

  • red − 0〜255の整数、または0〜100％のパーセンテージが含まれます。

  • green − 0〜255の整数、または0〜100％のパーセンテージが含まれます。

  • blue − 0〜255の整数、または0〜100％のパーセンテージが含まれます。

  • alpha − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

 
rgba(220,20,60, 0.5)

rgba値を持つカラーオブジェクトを-として変換します

rgba(220, 20, 60, 0.5)
3

argb

色の16進表現を定義します #AARRGGBBフォーマット。次のパラメータを使用します-

  • color −カラーオブジェクトを指定します。

 
argb(rgba(176,23,31,0.5))

argb色を-として返します

#80b0171f
4

hsl

色相、彩度、明度の値から色を生成します。以下のパラメータがあります-

  • hue −度を表す0〜360の整数が含まれます。

  • saturation − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

  • lightness − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

 
hsl(120,100%, 50%)

HSL値を-として使用してカラーオブジェクトを返します。

#00ff00
5

hsla

色相、彩度、明度、アルファ値から色を生成します。次のパラメータがあります-

  • hue −度を表す0〜360の整数が含まれます。

  • saturation − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

  • lightness − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

  • alpha − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

 
hsla(0,100%,50%,0.5)

HSLA値を使用してカラーオブジェクトを-として指定します

rgba(255, 0, 0, 0.5);
6

hsv

色相、彩度、明度の値から色を生成します。以下のパラメータが含まれています-

  • hue −度を表す0〜360の整数が含まれます。

  • saturation − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

  • value − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

 
hsv(80,90%,70%)

hsv値を持つカラーオブジェクトを-として変換します

#7db312
7

hsva

色相、彩度、値、アルファ値から色を生成します。以下のパラメータを使用します-

  • hue −度を表す0〜360の整数が含まれます。

  • saturation − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

  • value − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

  • alpha − 0〜100％の数値または0〜100％のパーセンテージが含まれます。

 
hsva(80,90%,70%,0.6)

hsva値が−のカラーオブジェクトを指定します

rgba(125, 179, 18, 0.6)

この章では、LESSでのカラーチャネル関数の重要性を理解します。LESSは、チャネルに関する値を設定するいくつかの組み込み関数をサポートします。チャネルは、色の定義に応じて値を設定します。HSL色には色相、彩度、明度チャネルがあり、RGB色には赤、緑、青のチャネルがあります。次の表に、すべてのカラーチャネル機能を示します。

シニア番号 機能と説明 例
1

hue

HSL色空間では、色相チャネルがカラーオブジェクトから抽出されます。

 
background: hue(hsl(75, 90%, 30%));

以下に示すようにCSSでコンパイルされます-

background: 75;
2

saturation

HSL色空間では、彩度チャネルがカラーオブジェクトから抽出されます。

 
background: saturation(hsl(75, 90%, 30%));

以下に示すようにCSSでコンパイルされます-

background: 90%;
3

lightness

HSL色空間では、明度チャネルはカラーオブジェクトから抽出されます。

 
background: lightness(hsl(75, 90%, 30%));

以下に示すようにCSSでコンパイルされます-

background: 30%;
4

hsvhue

HSV色空間では、色相チャネルがカラーオブジェクトから抽出されます。

 
background: hsvhue(hsv(75, 90%, 30%));

以下に示すようにCSSでコンパイルされます-

background: 75;
5

hsvsaturation

HSL色空間では、彩度チャネルがカラーオブジェクトから抽出されます。

 
background: hsvsaturation(hsv(75, 90%, 30%));

以下に示すようにCSSでコンパイルされます-

background: 90%;
6

hsvvalue

HSL色空間では、値チャネルはカラーオブジェクトから抽出されます。

 
background: hsvvalue(hsv(75, 90%, 30%));

以下に示すようにCSSでコンパイルされます-

background: 30%;
7

red

赤のチャネルがカラーオブジェクトから抽出されます。

 
background: red(rgb(5, 15, 25));

以下に示すようにCSSでコンパイルされます-

background: 5;
8

green

緑のチャネルは、カラーオブジェクトから抽出されます。

 
background: green(rgb(5, 15, 25));

以下に示すようにCSSでコンパイルされます-

background: 15;
9

blue

ブルーチャンネルはカラーオブジェクトから抽出されます。

 
background: blue(rgb(5, 15, 25));

以下に示すようにCSSでコンパイルされます-

background: 25;
10

alpha

アルファチャネルはカラーオブジェクトから抽出されます。

 
background: alpha(rgba(5, 15, 25, 1.5));

以下に示すようにCSSでコンパイルされます-

background: 2;
11

luma

輝度値は、カラーオブジェクトから計算されます。

 
background: luma(rgb(50, 250, 150));

以下に示すようにCSSでコンパイルされます-

background: 71.2513323%;
12

luminance

輝度値は、ガンマ補正なしで計算されます。

 
background: luminance(rgb(50, 250, 150));

以下に示すようにCSSでコンパイルされます-

background: 78.53333333%;

説明

LESSは、さまざまな方法で色を変更および操作し、同じ単位でパラメーターを取得するための便利な操作関数を多数提供します。LESSは、以下の表に示すように、いくつかのカラー操作機能をサポートしています。

シニア番号 ディレクティブと説明
1 飽和する

要素の色の強度または彩度を変化させます。
2 彩度を下げる

要素の色の強度または彩度を下げます。
3 軽くする

要素の色の明度を上げます。
4 暗くする

要素の色の強度または彩度を変化させます。
5 フェードイン

選択した要素の不透明度が高くなります。
6 フェードアウト

選択した要素の不透明度を下げます。
7 フェード

選択した要素の色の透明度を設定するために使用されます。
8 スピン

選択した要素の色の角度を回転させるために使用されます。
9 ミックス

不透明度とともに2色を混ぜ合わせます。
10 色合い

色の比率を下げると、色と白が混ざります。
11 シェード

色の比率を下げると、色と黒が混ざります。
12 グレースケール

選択した要素の色から彩度を破棄します。
13 コントラスト

要素の色のコントラストを設定します。

この章では、 Color Blending Functions以下で。これらは、Photoshop、Fireworks、GIMPなどの画像エディターで使用される同様の操作であり、CSSの色を画像に一致させます。

次の表は、LESSで使用されるカラーブレンディング機能を示しています。

シニア番号 機能と説明
1 かける

2つの色を乗算し、結果の色を返します。
2 画面

2色を取り、より明るい色を返します。乗算関数とは逆に機能します。
3 オーバーレイ

乗算と画面の効果を組み合わせて結果を生成します。
4 やわらかい光

オーバーレイと同様に機能しますが、色の一部のみを使用し、他の色をソフトハイライトします。
5 ハードライト

オーバーレイと同様に機能しますが、色の役割が逆になります。
6 差

最初の入力色から2番目の入力色を減算します。
7 除外

差分関数と同様に機能しますが、コントラストが低くなります。
8 平均

チャネルごと（RGB）ベースで2つの入力色の平均を計算します。
9 否定

これは、2番目の色から最初の色を差し引く差分関数とは逆に機能します。

コマンドラインを使用して、.lessファイルを.cssにコンパイルできます。

グローバルに使用するためのlesscのインストール

次のコマンドを使用して、npm（ノードパッケージマネージャー）を使用してlesscをインストールし、lesscをグローバルに使用できるようにします。

npm install less -g

パッケージ名の後に特定のバージョンを追加することもできます。例えばnpm install [email protected] -g

ノード開発のためのインストール

次のコマンドを使用して、最新バージョンのlesscをプロジェクトフォルダーにインストールします。

npm i less -save-dev

また、プロジェクトpackage.jsonのdevDependenciesにも追加されます。

lesscのベータリリース

ベータ版としてタグ付けされているのは lessc 構造はに公開されています npmここでは、新しい機能が定期的に開発されています。less -vは、現在のバージョンを取得するために使用されます。

lesscの未公開の開発バージョンをインストールする

未公開バージョンのlesscのインストールに進み、git URLを依存関係として識別するための指示に従う必要がある場合は、commit --ishを指定する必要があります。これにより、プロジェクトに正しいバージョンのleescを使用していることが保証されます。

サーバー側とコマンドラインの使用法

bin/lesscリポジトリにバイナリが含まれています。* nix上のWindows、OS X、nodejsで動作します。

コマンドラインの使用法

入力はから読み取られます stdin ソースがダッシュまたはハイフン（-）に設定されている場合。

lessc [option option = parameter ...]  [destination]

たとえば、コンパイルできます .less に .css 次のコマンドを使用して-

lessc stylesheet.less stylesheet.css

コンパイルできます .less に .css 次のコマンドを使用して、結果を縮小します。

lessc -x stylesheet.less stylesheet.css

オプション

次の表に、コマンドラインの使用法で使用されるオプションを示します。

シニア番号 オプションと説明 コマンド
1

Help

使用可能なオプションとともにヘルプメッセージが表示されます。

 
lessc -help
lessc -h
2

Include Paths

これには、ライブラリへの使用可能なパスが含まれています。これらのパスは、Lessファイルで簡単かつ比較的参照できます。ウィンドウ内のパスは、コロン（:)またはセミコロン（;）で区切られます。

 
lessc --include-path = PATH1;PATH2
3

Makefile

これは、出力としてstdoutへのmakefileインポート依存関係リストを生成します。

 
lessc -M
lessc --depends
4

No Color

色付きの出力を無効にします。

 
lessc --no-color
5

No IE Compatibility

IEの互換性チェックを無効にします。

 
lessc --no-ie-compat
6

Disable Javascript

より少ないファイルでjavascriptを無効にします。

 
lessc --no-js
7

Lint

構文をチェックし、出力なしでエラーを報告します。

 
lessc --lint
lessc -l
8

Silent

エラーメッセージの表示を強制的に停止します。

 
lessc --silent
lessc -s
9

Strict Imports

インポートを強制的に評価します。

 
lessc --strict-imports
10

Allow Imports from Insecure HTTPS Hosts

安全でないHTTPSホストからインポートします。

 
lessc --insecure
11

Version

バージョン番号を表示して終了します。

 
lessc -version
lessc -v
12

Compress

空白を削除し、出力を圧縮するのに役立ちます。

 
lessc -x
lessc --compress
13

Source Map Output Filename

より少ないコストでソースマップを生成します。sourcemapオプションがファイル名なしで定義されている場合、ソースとしてLessファイル名の拡張マップが使用されます。

 
lessc --source-map
lessc -source-map = file.map
14

Source Map Rootpath

ルートパスが指定されているため、ソースマップ内のLessファイルパスと、出力cssで指定されているマップファイルに追加する必要があります。

 
lessc --source-map-rootpath = dev-files/
15

Source Map Basepath

出力パスから削除する必要のあるパスが指定されています。ベースパスはルートパスオプションの反対です。

 
lessc --source-map-basepath = less-files/
16

Source Map Less Inline

すべてのLessファイルをソースマップに含める必要があります。

 
lessc --source-map-less-inline
17

Source Map Map Inline

これは、出力cssでマップファイルをインラインにする必要があることを指定します。

 
lessc --source-map-map-inline
18

Source Map URL

URLは、cssのマップファイル内のポイントを上書きできます。

 
lessc --source-map-url = ../my-map.json
19

Rootpath

相対インポートとURLでURL書き換えのパスを設定します。

 
lessc -rp=resources/
lessc --rootpath=resources/
20

Relative URLs

インポートされたファイルでは、URLが常にベースファイルを基準にするように、URLが書き直されます。

 
lessc -ru
lessc --relative-urls
21

Strict Math

それはあなたのcssのすべての数学関数を処理します。デフォルトでは、オフになっています。

 
lessc -sm = on
lessc --strict-math = on
22

Strict Units

混合ユニットが可能です。

 
lessc -su = on
lessc --strict-units = on
23

Global Variable

ファイルから参照できる変数が定義されています。

 
lessc --global-var = "background = green"
24

Modify Variable

これは、グローバル変数オプションとは異なります。lessファイルの最後に宣言を移動します。

 
lessc --modify-var = "background = green"
25

URL Arguments

すべてのURLに移動するために、引数を指定できます。

 
lessc --url-args = "arg736357"
26

Line Numbers

インラインソースマッピングが生成されます。

 
lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
27

Plugin

プラグインをロードします。

 
lessc --clean-css
lessc --plugin = clean-css = "advanced"

Lessは、サーバー側ではなく、必要に応じて動的にLessファイルをコンパイルする場合にブラウザーで使用されます。これは、小さいが大きなjavascriptファイルであるためです。

まず、ブラウザでLESSを使用するためにLESSスクリプトを追加する必要があります-

<script src = "less.js"></script>

ページでスタイルタグを見つけるには、ページに次の行を追加する必要があります。また、コンパイルされたcssを使用してスタイルタグを作成します。

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

オプションの設定

スクリプトタグの前に、プログラムでlessオブジェクトにオプションを設定できます。これは、lessおよび初期リンクタグのすべてのプログラムによる使用に影響します。

たとえば、次のようにオプションを設定できます-

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

以下に指定するように、スクリプトタグに別の形式でオプションを設定することもできます-

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

これらのオプションをリンクタグに追加することもできます。

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

属性オプションについて考慮する必要があるポイントは次のとおりです。

  • window.less <スクリプトタグ<リンクタグが重要度です。

  • キャメルケースではデータ属性を書き込むことはできません。リンクタグオプションは、時間オプションとして表されます。

  • 文字列以外の値を持つデータ属性は、JSONで有効である必要があります。

ウォッチモード

時計モードは、へのenvオプションを設定することで有効にすることができ、開発およびコール）（less.watchをless.jsファイルが追加された後。ウォッチモードを一時的に有効にする場合は、URLに＃！watchを追加します。

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

変数の変更

LESS変数の実行時変更が有効になります。新しい値が呼び出されると、LESSファイルが再コンパイルされます。次のコードは、変更変数の基本的な使用法を示しています-

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

デバッグ

上記のように、オプション！dumpLineNumbers：mediaqueryをurlまたはdumpLineNumbersオプションに追加できます。mediaqueryのオプションが（それはLESS-生成されたCSSスタイルのオリジナルLESSファイル名と行番号を表示します。）FireLESSで使用することができます

オプション

スクリプトファイルless.jsをロードする前に、オプションをグローバルlessオブジェクトに設定する必要があります。

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

  • async−ブール型です。インポートされたファイルは、オプションasyncがあるかどうかに関係なく要求されます。デフォルトでは、falseです。

  • dumpLineNumbers−文字列型です。出力cssファイルでは、dumpLineNumbersが設定されるとソース行情報が追加されます。これは、特定のルールのデバッグに役立ちます。

  • env−文字列型です。envは、開発または本番で実行される場合があります。ドキュメントのURLがで始まると、開発は自動的に設定されますfile:// または、ローカルマシンに存在します。

  • errorReporting −コンパイルに失敗した場合、エラー報告方法を設定できます。

  • fileAsync−ブール型です。ページにファイルプロトコルが存在する場合、非同期でインポートするかどうかを要求できます。

  • functions −オブジェクトタイプです。

  • logLevel−数値型です。javascriptコンソールにログレベルを表示します。

    • 2：情報とエラー

    • 1：エラー

    • 0：何もない

  • poll−ウォッチモードでは、ポーリング間の時間がミリ秒単位で表示されます。これは整数型です。デフォルトでは、1000に設定されています。

  • relativeUrls−URLは相対的なものになるように調整されます。デフォルトでは、このオプションはfalseに設定されています。これは、URLがすでにエントリレスファイルに相対的であることを意味します。ブール型です。

  • globalVars−グローバル変数のリストをコードに挿入します。文字列型変数は引用符で囲む必要があります

  • modifyVars−グローバル変数オプションとは異なります。lessファイルの最後に宣言を移動します。

  • rootpath −すべてのURLリソースの先頭にパスを設定します。

  • useFileCache−セッションごとのファイルキャッシュを使用します。lessファイルのキャッシュは、すべてのlessファイルが再度取得されないmodifyVarsを呼び出すために使用されます。

LESSはクロスブラウザフレンドリーです。Google Chrome、Mozilla Firefox、Safari、Internet Explorerなどの最新のブラウザをサポートし、CSS要素を再利用して、同じセマンティクスでLESSコードを記述できます。クライアント側でLESSを使用している間、およびJavaScriptを表示している間は、パフォーマンスへの影響に注意して、次のような外観上の問題を回避する必要があります。

  • スペルミス、
  • 色の変化、
  • Texture
  • Look
  • リンクなど

サーバー側でLESSファイルをコンパイルして、Webサイトのパフォーマンスレベルを向上させます。

PhantomJSは実装していないFunction.prototype.bindのあなたが使用する必要があるので、機能をES5シムPhantomJSの下で実行するにはJavaScriptエンジンを。ユーザーは変数を調整してテーマに影響を与え、制作でクライアント側のLESSを使用してリアルタイムで表示できます。

古いブラウザでLESSを実行する場合は、LESSがサポートするJavaScript機能を追加するes-5 shimJavaScriptエンジンを使用してください。ブラウザでサポートされている必要があるJSON.parseを使用して、スクリプトまたはリンクタグの属性を使用できます。

この章では、プラグインをアップロードしてサイトの機能を拡張する方法を理解します。プラグインを使用すると、作業が簡単になります。

コマンドライン

コマンドラインを使用してプラグインをインストールするには、最初にlesscプラグインをインストールする必要があります。プラグインは、最初にless-pluginを使用してインストールできます。次のコマンドラインは、clean-cssプラグインのインストールに役立ちます-

npm install less-plugin-clean-css

直接、次のコマンドを使用して、インストールされたプラグインを使用できます-

lessc --plugin = path_to_plugin = options

コードでプラグインを使用する

Nodeでは、プラグインが必要であり、オプションプラグインとして配列に渡されます。

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

ブラウザで

less.jsスクリプトの前に、プラグインの作成者はページにjavascriptファイルを含める必要があります。

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

少ないプラグインのリスト

次の表に、LESSで使用可能なプラグインを示します。

ポストプロセッサ/機能プラグイン

シニア番号 プラグインと説明
1 自動プレフィックス

LESSからの変換後にCSSにプレフィックスを追加するために使用されます。
2 CSScomb

それはあなたのスタイルシートのメンテナンスを改善するのに役立ちます。
3 clean-css

LESSからのCSS出力を最小化します。
4 CSSWring

LESSからのCSS出力を圧縮または縮小します。
5 css-flip

これは、左から右（LTR）または右から左（RTL）からCSSを生成するために使用されます。
6 関数

LESSの関数をLESS自体に書き込みます。
7 グロブ

複数のファイルをインポートするために使用されます。
8 group-css-media-queries

Lessの後処理を行います。
9 インラインURL

URLをデータURIに自動的に変換します。
10 npm-インポート

npmパッケージからのインポートが少なくて済みます。
11 どうぞ

Lessの後処理に使用されます。
12 rtl

LESSは、ltr（左から右）からrtl（右から左）に逆になります。

フレームワーク/ライブラリインポーター

シニア番号 インポーターと説明
1 ブートストラップ

ブートストラップLESSコードは、カスタムLESSコードの前にインポートされます。
2 バウアーリゾルブ

LESSファイルはBowerパッケージからインポートされます。
3 less.jsの枢機卿CSS

カスタムLESSコードの前に、CardinalのLESSコードがインポートされます。
4 Flexboxグリッド

最も一般的にインポートされるフレームワークまたはライブラリインポーター。
5 フレキシブルグリッドシステム

フレキシブルグリッドシステムをインポートします。
6 イオン

イオンフレームワークをインポートします。
7 レッシャット

Lesshatミックスインをインポートします。
8 スケルトン

スケルトンレスコードをインポートします。

関数ライブラリ

シニア番号 インポーターと説明
1 高度なカラー機能

より対照的な色を見つけるために使用されます。
2 cubehelix

ガンマ補正値1を使用すると、cubehelix関数は2つの色の間の色を返すことができます。
3 リスト

操作関数ライブラリを一覧表示します。

プラグイン作成者向け

LESSを使用すると、作成者はlessと組み合わせることができます。

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

  • pluginManager ファイルマネージャー、ポストプロセッサーまたは訪問者を追加できるホルダーを提供します。

  • setOptions 関数は文字列を渡します。

  • printUsage 関数はオプションを説明するために使用されます。

LESSでのプログラムによる使用の主なポイントは、less.render関数です。この関数は、LESS-で次の形式を使用します。

less.render(input_data, options)
.then(function(output) {
   //code here
},
   
function(error) {
});

関数は次のように書くこともできます-

less.render(css, options, function(error, output) {})

オプションには、 Aを返すオプションの引数でありますpromise コールバックを指定せずに promiseコールバックを指定するとき。ファイルを文字列に読み込んで表示し、メインファイルのファイル名フィールドを設定できます。

sourceMapのオプションは、次のようなセットsourcemapオプションにできますsourceMapURL、sourceMapBasepath、sourceMapRootpath、outputSourceFilesとsourceMapFileInline。ここで考慮する必要がある点は、sourceMapオプションがless.jsで使用できないことです。

以下の形式で示すようにリスナーを追加することで、ログにアクセスできます。

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

上記で定義された関数はオプションです。エラーが表示された場合、エラーはに渡されますcallback または promiseless.renderに存在します。

この章では、LESSでのオンラインコンパイラの重要性を理解します。オンラインコンパイラは、少ないコードをcssコードにコンパイルするために使用されます。オンラインコンパイラツールは、cssコードの生成に簡単に役立ちます。以下は、利用可能なオンラインレスコンパイラです-

  • winless.org/online-less-compiler

  • lesstester.com

  • dopefly.com/less-converte

  • lessphp.gpeasy.com/demo

  • leafo.net/lessphp/editor

  • estFiddle

サポートの少ないオンラインWebIDE /プレイグラウンド

以下は、サポートが少ない利用可能なオンラインWebIDEです。

シニア番号 オンラインWebIDEと説明
1 CSSDeckラボ

これは、HTML、CSS、JSコードを含むテストケースを簡単に作成できる場所です。
2

CodePen

これはフロントエンドWebの遊び場です。
3 フィドルサラダ

これは、環境に既存のコードを追加できる場所です。
4 JSビン

これは、JavascriptとCSSコードに役立ちます。
5 jsFiddle

これはオンラインのウェブエディタです。

この章では、LESSのGUIについて理解します。プラットフォームにさまざまなLESSツールを使用できます。コマンドラインの使用法とツールについては、このリンクをクリックしてください。

次の表に、クロスプラットフォームをサポートするGUIコンパイラを示します。

シニア番号 ツールと説明
1 クランチ2！

Windows、Mac、Linuxなどのプラットフォーム全体をサポートします。エディターに統合コンパイルを提供します。
2

Mixture

これは、設計者や開発者が使用するラピッドプロトタイピングおよび静的サイト生成ツールです。これは迅速で効率的であり、エディターでうまく機能します。すばらしいツールとベストプラクティスのコレクションがまとめられています。
3 シンプル

ミニマルなLESSコンパイラです。ドラッグアンドドロップおよびコンパイル機能を提供します。SimpLESSは、SimpLESSのユニークな機能であるprefixerを使用してCSSにプレフィックスを付けることをサポートしています。チタンプラットフォーム上に構築されています。
4 コアラ

LESS、SASS、CoffeeScriptのコンパイルに使用されます。コンパイルエラー通知のサポートやコンパイルオプションのサポートなどの機能を提供します。

次の表に、WindowsプラットフォームをサポートするGUIコンパイラを示します。

シニア番号 ツールと説明
1 プレプロ

これは、LESS、SASS、Compass、Stylus、Jadeなどをコンパイルするツールです。
2 WinLess

当初はLESS.appのクローンでしたが、いくつかの設定があり、より多くの機能を備えた完全なアプローチを採用しています。コマンドライン引数での開始をサポートします。

次の表に、OSXプラットフォームをサポートするGUIコンパイラを示します。

シニア番号 ツールと説明
1 CodeKit

tはLESS.appの後継であり、SASS、Jade、Markdownなどの他の多くの処理言語の中でLESSをサポートします。
2 LiveReload

CSSを編集し、画像を瞬時に変更します。SASS、LESS、CoffeeScriptなどがうまく機能します。

次の表に、OSXプラットフォームをサポートするGUIコンパイラを示します。

シニア番号 ツールと説明
1 Plessc

lesscのGUIフロントエンドです。ログビューア、自動コンパイル、選択したエディタでLESSファイルを開く、ソースマップのサポートなどの機能があります。

この章では、LESSでのエディターとプラグインの重要性を理解します。エディタは、ユーザーがテキストを編集できるようにするシステムまたはプログラムです。プラグインは、サイトの機能を拡張するために使用されるソフトウェアです。

ここで、LESSのエディターとIDEについて説明します。

シニア番号 エディターとIDEと説明
1 噛み砕く！

Windows、Mac、Linuxなどのクロスプラットフォームをサポートしています。エディターに統合コンパイルを提供します。
2 Mindscape Web Workbench

CoffeeScript、SASS、Compass、LESSの編集を提供し、VisualStudioでの最新のWeb開発を容易にします。
3 NetBeans

これはオープンソースのJavaベースのIDEです。これは、デスクトップ、モバイル、Webアプリケーション、およびHTML、JavaScript、CSSを含むHTML5アプリケーションの迅速な開発に役立ちます。
4 TextMate

これは、Mac OS X用の汎用グラフィカルテキストエディターです。宣言型のカスタマイズ、記録可能なマクロ、スニペット、シェル統合、開いているドキュメントタブ、および拡張可能なバンドルシステムを備えています。
5 Vim

vimバンドルは、動的スタイルシート言語LESSのインデント、強調表示、オートコンプリートなどの機能を追加します。
6 Emacs

これには、LESS CSS（lesscss.org）のEmacsモードを提供するless-css-modelが含まれています。Emacsはコンパイルオンセーブをサポートしています。
7 jetBrainsWebStormおよびPhpStorm

WebStromは軽量で強力なIDEです。Node.jsを使用した複雑なクライアント側およびサーバー開発に完全に対応しています。PhpStormはPHPIDEであり、コードの深い理解をサポートし、一流のコーディング支援とすべての主要なツールおよびフレームワークのサポートを提供します。
8 ブラケット

これは、Webデザイナーやフロントエンド開発者を支援する、軽量で強力なオープンソースのコードエディターです。
9 CodeLobster

これは、主にPHP用のポータブル統合開発環境（IDE）です。また、HTML、CSS、JavaScriptの開発もサポートしており、Drupal、WordPress、Smarty、Joomla、JQuery、Facebook、Codeigniter、Yii、CakePHPのプラグインを利用できます。
10 KineticWing IDE

迅速、クリーン、軽量、ポータブルなIDEです。これは、スマートかつ高速に作業するのに役立つフルサ​​イズの開発スイートです。
11 nodeMirror

これはオープンソースで簡単にカスタマイズできるIDEです。CodeMirror.net、pty.jsおよびその他のライブラリを利用します。
12 HTMLキットツール

This is a modern web editor for HTML5, CSS3, JavaScript and more. With this, you can edit, preview, validate publish and manage projects from modern standards compliant editor.

崇高なテキスト2＆3

崇高なテキストは、次の表に示すようLESSのためのさまざまなオプションを提供します-

シニア番号 オプションと説明
1 あまり崇高ではない

崇高なテキストのLESS構文は、スニペットとともに.lessファイルの構文の強調表示を提供します。
2 Sublime-Less-to-CSS

保存時に.lessファイルをCSSにコンパイルするための崇高なテキスト2および3プラグイン。必要ですlessc PATHにインストールされています。
3 ビルドが少ない-崇高

用LESSビルドシステム崇高なテキスト2 LESSファイル用の2つのビルドシステムを提供し、両方が縮小さと非縮小さ。
4

SublimeOnSaveBuild

これは、[保存]をクリックしたときにビルドをトリガーする崇高なテキスト2のシンプルなプラグインです。LESS、Compassなどのプリプロセッサでうまく機能します。

Eclipse

Eclipseには、次の表に示すように、LESS用の2つのプラグインがあります-

シニア番号 プラグインと説明
1 EclipseLessプラグイン

このプラグインは、Eclipse IDEを拡張することにより、LESSスタイルシートを編集およびコンパイルするための便利な機能を提供します。
2 Transpilerプラグイン

このEclipseプラグインは、LESS、SASS、CoffeeScriptなどのファイルを自動的に変換します。

Visual Studio

Visual Studioには、LESSの次の異なるオプションがあります-

シニア番号 オプションと説明
1 CSSが少ない

この拡張機能により、LESSファイルがCSS言語サービスで開かれます。
2 Web Essentials 2012

この拡張機能を使用すると、一般的なタスクをはるかに簡単に実行でき、Web開発者向けの便利な機能がVisualStudioに追加されます。
3 Web Essentials 2013

Visual Studioを拡張して、特定の言語やエディターに固有ではない多くの新機能を追加します。
4 Webツール2013

これは、ASP.NETを含む開発タスクで役立ちます

ドリームウィーバー

Dreamweaverを使用する際は、次の点を考慮する必要があります。

  • これは、Webデザイナーや開発者がアプリケーションやWebサイトを作成するために使用するAdobeアプリケーションです。

  • ブラウザ、デバイス、タブレットなど、複数のプラットフォームで動作します。

  • Webデザイナーは、Dreamweaverを使用してWebサイトのプロトタイプを作成します。

  • DMXzone Less CSSコンパイラは、すべてのLESSCSSパワーをDreamweaverで直接作成します。

Notepad ++ 6.x

Notepad ++で作業するときは、次の点を考慮する必要があります。

  • Notepad ++は、タブ付き編集、つまり1つのウィンドウで開いている複数のファイルの操作をサポートするフリーテキストエディターおよびソースコードエディターです。

  • LESS for Notepad ++は、.lessファイルの構文の強調表示または色付けを提供するxmlファイルです。詳細については、このリンクをクリックしてください。

  • Notepad ++をインストールするには、このリンクをクリックしてください。

Node.jsコンパイラ

以下は、LESSに使用されるNode.jsコンパイラです。

うなり声-貢献なし

Gruntはノードタスクランナーです。LESSファイルに変更をコミットするたびにスタイルシートがコンパイルされます。

アセンブルレス

assemble-lessは、LESSファイルをCSSにコンパイルするための強力なgruntプラグインです。lessタスクは、LESSバンドル、UIコンポーネント、圧縮されたスタイルシート、またはテーマを定義するためのJSONおよびLo-dash（アンダースコア）テンプレートをプルします。

gulp-less

Gulp用のLESSプラグインです。gulp-minify-cssは、CSSを縮小するために使用されます。gulp-sourcemapsは、ソースマップライブラリを生成するために使用されます。

休憩

これは、LESSに基づいて構築され、CSSコードの最適化に役立つオープンソースツールです。これにより、CSSコードのエラーがなくなり、クリーンで管理しやすくなります。

オートレス

それはある.lessファイルウォッチャー。依存関係の追跡とクロスプラットフォームの通知が含まれています。

Less.jsのミドルウェアを接続する

これは、LESSファイルの接続JSフレームワークの処理を可能にするために使用されます。要求に応じてソースファイルをコンパイルし、コンパイルされたデータを次の要求のためにキャッシュします。

その他のテクノロジー

以下は、LESSコードのコンパイルに役立つ他のいくつかのテクノロジーです。

Wro4jランナーCLI

次のコマンドを使用して、wro4j-runner.jarをダウンロードし、CSSでLESSコードをコンパイルできます。

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

Wro4j Runner CLIの詳細については、次のリンクにアクセスしてください。

CSS :: LESSp

このモジュールは、LESSファイルを解析してCSSファイルにコンパイルするために使用されます。以下は、コンパイルに使用されるコマンドです-

lessp.pl styles.less > styles.css

CSS :: LESSpの詳細については、次のリンクにアクセスしてください。

Windowsスクリプトホスト

以下は、Windowsで実行されるコマンドラインコンパイラです。

cscript //nologo lessc.wsf input.less [output.css] [-compress]

OR

lessc input.less [output.css] [-compress]

次のリンクにアクセスして、Windows用のLess.jsについて詳しく知ることができます。

ドットレス

以下は、Windows用にドットレスで実行するコマンドラインコンパイラです。

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

ドットレスの詳細については、次のリンクにアクセスしてください

UI /テーマのフレームワークとコンポーネント

LESSは、次の表にリストされているUI /テーマフレームワークの一部をサポートします-

シニア番号 フレームワークと説明
1 1pxdeep

これは、強力な配色コントロールを提供するフラットなBootstrap3テーマです。
2 ブートフラット

これは、Bootstrapに基づくオープンソースフレームワークです。
3 BootPress

フラットファイルCMSに基づくPHPフレームワークです
4 ブートストラップ

これは、より高速で簡単なWeb開発のための強力なモバイルファーストフロントエンドフレームワークです。
5 ブートストラップa11yテーマ

Web開発に簡単にアクセスできます。
6 ブーツウォッチ

これは、Bootstrapに無料のテーマを提供するオープンソースのテーマです。
7 枢機卿

これは、レスポンシブWebサイト、ユーザーインターフェイス、およびアプリケーションのCSSを維持できるモバイルファーストのCSSフレームワークです。
8 CSSHorus

モバイルサイトの開発を容易にするライブラリです。
9 フラットUI無料

これは、基本的なコンポーネントと複雑なコンポーネントを含み、Bootstrapのテーマデザインを提供するBootstrap3に基づいています。
10 フロントサイズ

これは、ウィジェットを構築するための一連のツールを含むフロントエンドフレームワークです。
11

InContent

CSS3とSASS / LESSを使用して画像の説明を指定します。
12 インク

レスポンシブWebインターフェイスを作成します。
13 JBST

これは、WordPressの子テーマを作成するために使用され、スタンドアロンのWebサイトビルダーとして使用される強力なテーマフレームワークです。
14 KNACSS

レスポンシブで拡張可能なスタイルシートを使用してHTML / CSSプロジェクトを開発するために使用されます。
15 久部

これは、プロのデザイナーや開発者が使用するCSSフレームワークです。
16 Metro UI CSS

これは、プロジェクトでWindowsMetroスタイルを作成するために使用されるフロントエンドフレームワークです。
17 プレ

LESSを使用するのはCSSフレームワークです。
18 前奏曲

LESSを使用するのはフロントエンドCSSフレームワークです。
19 スキーマ

これは、複雑なWebサイトの構築に役立つ軽量で応答性の高いフレームワークです。
20 セマンティックUI

これは、HTMLを使用してレスポンシブレイアウトを作成するユーザーインターフェイスフレームワークです。
21 UIkit

これは、HTML、CSS、およびJSコンポーネントを含み、Webアプリケーションの使用と開発が容易なフロントエンドフレームワークです。
22

ngBoilerplate

これは、AngularJSプロジェクトに使用されるgruntベースのビルドシステムです。
23 レールが少ない

これは、RailsプロジェクトにLess.jsを使用する動的なスタイルシート言語です。
24 ウィー

これは、レスポンシブWebプロジェクトを開発するためのHTML、CSS、およびJavaScriptブートストラップコンポーネントを含むフロントエンドフレームワークです。

グリッドシステム

LESSは、次の表にリストされているグリッドシステムフレームワークをサポートします-

シニア番号 フレームワークと説明
1 フレキシブルグリッドシステム

これは、柔軟な方法でWebプロジェクトを作成するCSSフレームワークです。
2 AdaptGrid

これは、Webアプリケーションを開発するためのレスポンシブグリッドシステムです。
3 流動性

これは、LESSプリプロセッサに基づく軽量のレスポンシブグリッドシステムです。
4 ゴールデングリッドシステム

レスポンシブデザインのためのグリッドシステムです。
5 少ない禅グリッド

サブピクセルの丸めの問題を解決するために使用されます。
6 Order.less

これは、位置合わせ、グリッドシステム、およびモジュラースケールに使用されるLESSライブラリです。
7 責任を持って

これは、カスタマイズ可能なスタンドアロンのグリッドシステムです。
8 レスポンシブボイラープレート

これは、サイトのレスポンシブWebデザインを作成するために使用される軽量グリッドシステムです。
9 Semantic.gs

これは、オペレーティングシステムへのWebブラウザのデフォルトの配布です。

Mixinライブラリ

LESSは、次の表にリストされているミックスインライブラリを提供します-

シニア番号 フレームワークと説明
1 3L

LESSプリプロセッサに最新のCSS3機能を提供します。
2 アニメート

これは、プロジェクトで使用されるブラウザアニメーションに使用されるライブラリです。
3 クリアレス

スタイルを破壊したり、スタイルシートに過度のサイズを作成したりすることなく、再利用可能なLESSミックスインを使用します。
4 Css3LessPlease

css3please.comをLESSミックスインに変換し、CSSを実行すると要素が即座に変更されます。
5 CssEffects

LESSミックスインとして記述されたCSSスタイルの効果を提供します。
6 Cssowl

これは、LESS、SASS、およびStylusをサポートするミックスインライブラリです。
7 cube.less

CSSのみを使用して作成された3Dアニメーションキューブです。
8 tRRtoolbelt.less

これは、LESSファイルに対してアクションを実行するためのミックスインと関数を提供するライブラリです。
9 EST（東部基準時

これはLESSに基づいており、LESSコードをより効率的に記述できます。
10 六角形

サイズと色のCSS六角形を作成します。
11 ホームレス

これは、Less.jsに役立つ関数を含むミックスインライブラリです。
12

LESS Elements

これは、LESSプリプロセッサ用のミックスインのコレクションです。
13 少ない帽子

これは、すべてのブラウザーのCSSをエクスポートするのに役立ち、多数のシャドウ、グラデーション、アニメーションなどを作成するミックスインライブラリです。
14 レスリー

LESSで書かれたテストスイートです。
15 LESS-ビディ

これは、コードを複製することなく双方向のスタイリングを提供するLESSミックスインのコレクションです。
16

LESS-Mix

LESSで書かれたミックスインライブラリです。
17 メディアクエリからタイプへ

これは、Internet Explorer8以下のバージョンがコンテンツにアクセスできるようにするメディアクエリを作成するために使用されます。
18 詳細-Colors.less

Webアプリケーションの設計中に色を操作するための変数を提供します。
19 もっと少ない

これは、ブラウザ間の互換性のためにCSSコードを記述できるライブラリです。
20 More.less

これは、コンパスとTwitter Bootstrapの組み合わせであり、CSS3とクロスブラウザーミックスインを使用することで、LESSにより多くの機能を提供します。
21 多かれ少なかれ

less.jsに強力なミックスインを提供します。
22 normalize.less

LESSを使用して正規化されたCSSを提供します。
23 オーバン

これは、Webアプリケーションの開発プロセスをスピードアップするミックスインのコレクションです。
24 プリブート

これは、より良いCSSを作成するためにミックスインと変数を使用するLESSサービスのセットであり、ブートストラップから形成されます。
25 プレリュード-ミックスイン

これはLESSミックスインライブラリです。
26 Shape.LESS

これは、アプリケーションのさまざまな形状を指定するための多数のミックスインを提供します。
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved