少ない-概要

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

CSSプリプロセッサは、CSSを拡張し、通常のCSS構文にコンパイルされるスクリプト言語であり、Webブラウザーで読み取れるようにします。 variables _、 functions 、 mixins 、 operations_などの機能を提供し、動的なCSSを構築できます。

なぜ少ないのですか？

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

LESSは、より高速で簡単な、ブラウザーに依存しない、よりクリーンなCSSの作成をサポートします。
LESSはJavaScriptで設計されており、他のCSSプリプロセッサよりも高速にコンパイルされる_live_で使用されるように作成されています。
LESSは、コードをモジュール形式で保持します。これは、コードを読みやすく、簡単に変更できるようにすることで非常に重要です。
LESS _variables_を使用することで、より高速なメンテナンスを実現できます。

歴史

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

特徴

よりクリーンで読みやすいコードは、体系化された方法で記述できます。
スタイルを定義でき、コード全体で再利用できます。
LESSはJavaScriptに基づいており、CSSのスーパーセットです。
LESSは、コードの冗長性の問題を整理するアジャイルツールです。

利点

LESSは、ブラウザー間で機能するCSSを簡単に生成します。
LESSを使用すると、_nesting_を使用して、より適切に構成されたコードを作成できます。
_variables_を使用することにより、メンテナンスをより迅速に行うことができます。
LESSでは、ルールセットでクラスを参照することにより、クラス全体を簡単に再利用できます。
LESSは、_operations_の使用を提供します。これにより、コーディングが高速になり、時間を節約できます。

デメリット

CSSプリプロセスを初めて使用するかどうかを知るには時間がかかります。
モジュール間の密結合のため、依存モジュールの再利用および/またはテストにはさらに努力を払う必要があります。
LESSは、フレームワーク_Compass 、 Gravity_、および_Susy_で構成されるSASSのような古いプリプロセッサと比較して、フレームワークが少なくなっています。

LESS-インストール

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

LESSのシステム要件

オペレーティングシステム-クロスプラットフォーム
ブラウザのサポート-IE（Internet Explorer 8 +）、Firefox、Google Chrome、Safari。

LESSのインストール

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

ステップ1 *-LESSの例を実行するには、 *NodeJs が必要です。 NodeJsをダウンロードするには、https://nodejs.org/en/のリンクを開きます。次のような画面が表示されます-

少ないインストール

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

ステップ2 *-セットアップを実行して、_Node.js_をシステムにインストールします。

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

npm install -g less

ステップ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の簡単な例です。

こんにちは

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

   <body>
      <h1>Welcome to finddevguides</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

CSSに非常によく似た_style.less_ファイルを作成しましょう。唯一の違いは、。less_拡張子で保存されることです。 _l_と.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 ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

少ないインストール

LESS-ネストされたルール

説明

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

例

次の例は、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_rulesl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

ネストされていないルール

LESS-ネストされたディレクティブとバブリング

説明

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

例

次の例は、ネストされたディレクティブの使用と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_bubblingl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

ネストされていないディレクティブ

LESS-操作

説明

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コードを operationsl ファイルに保存します。
この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コードを escapingl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

少ないエスケープ

LESS-機能

説明

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コードを functional ファイルに保存します。
このHTMLファイルをブラウザーで開き、次の出力が表示されることを表示します。

少ない関数

LESS-名前空間とアクセサ

説明

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

例

次の例は、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_accessorsl ファイルに保存します。
この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コードを scopel ファイルに保存します。
この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コードを commentsl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

コメントなし

LESS-インポート

説明

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.finddevguides.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

パスリンクから_style.less_にインポートされる_myfile.less_ファイル：/less/myfile.less [https://www.finddevguides.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コードを importingl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

インポートが少ない

LESS-変数

この章では、LESSの変数について説明します。 LESSでは、@変数を使用して_variables_を定義できます。 _Variable_の割り当ては、* colon（：）*を使用して行われます。

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

Sr.No.	Variables usage & Description
1	Overview _variables_を使用すると、同じ値を何度も繰り返すことを回避できます。
2	Variable Interpolation 変数は、selector names _、 property names 、URLs、 @ import_ステートメントなどの他の場所でも使用できます。
3	Variable Names 値で構成される変数名を使用して変数を定義できます。
4	Lazy Loading 遅延読み込みでは、変数が使用されていなくても使用できます。
5	Default Variables デフォルト変数には、まだ設定されていない場合にのみ変数を設定する機能があります。変数は後で定義することで簡単にオーバーライドできるため、この機能は必要ありません。

少ない-拡張

Extendは、*：extend *セレクターを使用して1つのセレクター内の他のセレクタースタイルを拡張するLESS擬似クラスです。

例

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

extend_syntax

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

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

Less Extend

拡張構文

拡張は、ルールセットに配置されるか、セレクタに添付されます。これは、コンマで区切られた1つ以上のクラスを含む擬似クラスに似ています。オプションのキーワード all を使用すると、各セレクターを追跡できます。

例

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

extend_syntax

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

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

Less Extend

次の表は、LESSで使用できるすべての種類の拡張構文を示しています-

Sr.No.	Types & Description
1	Extend Attached to Selector Extendは、セレクターをパラメーターとして持つ擬似クラスに似たセレクターに接続されます。
2	Extend Inside Ruleset ＆：extend（selector）*構文は、ルールセットの本体内に配置できます。
3	Extending Nested Selectors ネストされたセレクターは、_extend_セレクターを使用して照合されます。
4	Exact Matching with Extend デフォルトでは、 extend はセレクター間の完全一致を検索します。
5	nth Expression それ以外の場合、n番目の式の形式は拡張において重要であり、セレクタを異なるものとして扱います。
6	Extend "all" extend* 引数でキーワード_all_が最後に識別されると、LESSは別のセレクターの一部としてそのセレクターと一致します。
7	Selector Interpolation with Extend extend* は、補間セレクターに接続できます。
8	Scoping/Extend inside @media Extendは、同じメディア宣言内に存在するセレクターのみに一致します。
9	Duplication Detection セレクターの重複を検出できません。

以下は、拡張のユースケースのタイプです

Sr.No.

Types & Description

1

Classic Use Case

クラシックユースケースは、LESSに基本クラスを追加しないようにするために使用されます。

2

Reducing CSS Size

Extendは、使用するプロパティまでセレクタを移動するために使用されます。これにより、CSSで生成されたコードを削減できます。

3

Combining Styles/A More Advanced Mixin

extendを使用すると、特定のセレクターの同じスタイルを他のセレクターに結合できます。

少ない-ミックスイン

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

次の表は、LESS _mixins_の使用の詳細を示しています。

Sr.No.	Mixins usage & Description
1	Not Outputting the Mixin 後に括弧を付けるだけで、出力内でミックスインを非表示にすることができます。
2	Selectors in Mixins ミックスインにはプロパティだけでなく、セレクタも含めることができます。
3	Namespaces 名前空間は、共通の名前でミックスインをグループ化するために使用されます。
4	Guarded Namespaces ガードがネームスペースに適用される場合、ガード条件がtrueを返す場合のみ、それによって定義されるミックスインが使用されます。
5	The !important keyword _！important_キーワードは、特定のプロパティをオーバーライドするために使用されます。

例

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

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

   <body>
      <h1>Welcome to finddevguides</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_mixinsl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

LESS Mixins

ミックスインを呼び出す場合、括弧はオプションです。上記の例では、。p1（）; *と *.p1; の両方のステートメントが同じことを行います。

LESS-パラメトリックミックスイン

説明

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

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

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

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

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

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

Sr.No.	Types & Description
1	Mixins with Multiple Parameters パラメーターは、コンマまたはセミコロンを使用して区切ることができます。
2	Named Parameters ミックスインは、名前を使用して位置ではなくパラメーター値を提供します。
3	@arguments Variable ミックスインが呼び出されると、_ @ arguments_には渡されたすべての引数が含まれます。
4	Advanced Arguments and the @rest Variable Mixinは、 …. を使用して可変個の引数を取ります。
5	Pattern-matching mixinにパラメーターを渡すことにより、mixinの動作を変更します。

LESS-関数としてのミックスイン

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

次の表は、_mixins_を関数として詳細に使用する方法を示しています。

Sr.No.

Mixins usage & Description

1

Mixin scope

ミックスインは変数で構成されています。これらは呼び出し元のスコープで使用でき、表示されます。

2

Mixin and return values

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

3

Mixin inside another mixin

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

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ファイルをブラウザで開くと、次の出力が表示されます。

mixetへのルールセットの受け渡しが少ない

スコーピング

切り離されたルールセット内のすべての変数とミックスインは、ルールセットが呼び出されたり定義されたりする場所であればどこでも使用できます。それ以外の場合、呼び出し元と定義スコープの両方がデフォルトで利用可能です。両方のスコープに同じミックスインまたは変数が含まれる場合、宣言スコープが優先されます。分離されたルールセット本体は、宣言スコープで定義されます。切り離されたルールセットが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

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

LESS-インポートディレクティブ

説明

*@ 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 finddevguides...</p>
   </body>
</html>

次に、_import_dir.less_ファイルを作成します。

import_dir.less

.myline {
   font-size: 20px;
}

ここで、_style.less_ファイルを作成します。

style.less

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

_import_dir.less_ファイルは、パスlink：/less/import_dir.less [https://www.finddevguides.com/less/import_dir.less]から_style.less_ファイルにインポートされます。

次のコマンドを使用して、_style.less_を_style.css_にコンパイルできます-

lessc style.less style.css

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

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

出力

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

上記のHTMLコードを import_directivesl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

ディレクティブのインポート

LESS-インポートオプション

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

次の表は、インポートステートメントで実装されるインポートディレクティブの一覧です。

Sr.No.	Import options & Description
1	reference 参照としてのみLESSファイルを使用し、出力しません。
2	inline これにより、CSSを処理せずに出力にコピーできます。
3	less ファイルの拡張子に関係なく、インポートされたファイルは通常のLESSファイルとして扱われます。
4	css ファイルの拡張子に関係なく、インポートされたファイルは通常のCSSファイルとして扱われます。
5	once ファイルは一度だけインポートされます。
6	multiple ファイルを複数回インポートします。
7	optional インポートするファイルが見つからなくても、コンパイルを続行します。

*@ import* ステートメントでは複数のキーワードを使用できますが、キーワードを区切るにはコンマを使用する必要があります。

例えば-

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

レス-Mixin Guards

説明

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

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

Sr.No.	Types & Description
1	Guard Comparison Operators 比較演算子（=）を使用して、数値、文字列、識別子などを比較できます。
2	Guard Logical Operators _and_キーワードを使用して、ガード付きの論理演算子を回避できます。
3	Type Checking Functions 一致するミックスインの値タイプを決定するための組み込み関数が含まれています。
4	Conditional Mixins LESSは_default_関数を使用して、mixinを他のミキシング一致と一致させます。

例

次の例は、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 finddevguides...</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-guardl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

ミキシンガード

LESS-CSSガード

説明

ガードは、式の単純な値またはいくつかの引数を照合するために使用されます。 CSSセレクターに適用されます。これは、mixinを宣言してすぐに呼び出すための構文です。 if typeステートメントを正常に引き出すため。複数のガードをグループ化できる機能*＆*でこれに参加します。

例

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

css_guard

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

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

Less css guard

LESS-ループ

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

例

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

loop_example

<!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

.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 ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

Less css guard

少ない-マージ

説明

LESSのこの機能により、単一のプロパティを使用して、複数のプロパティからコンマまたはスペース区切りリストに値を追加できます。バックグラウンドおよび変換のプロパティに使用できます。

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

Sr.No.

Types & Description

1

Comma

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

2

Space

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

LESS-親セレクター

この章では、 Parent Selectors がどのように機能するかを理解しましょう。＆（アンパサンド）演算子を使用して、親セレクターを参照できます。ネストされたルールの親セレクターは*＆*演算子で表され、既存のセレクターに変更クラスまたは擬似クラスを適用するときに使用されます。

次の表は、親セレクタのタイプを示しています-

Sr.No.

Types & Description

1

Multiple &

＆*は、最も近いセレクターとすべての親セレクターを表します。

2

Changing Selector Order

セレクターの順序を変更する場合、継承された（親）セレクターの前にセレクターを追加すると便利です。

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 finddevguides</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 ファイルに保存します。 *このHTMLファイルをブラウザで開くと、次の出力が表示されます。

Less Parent Selector

_Parent selectors_演算子には、ネストされたルールのセレクターをデフォルト以外の方法で組み合わせる必要がある場合など、多くの用途があります。* ＆*のもう1つの典型的な使用法は、クラス名を繰り返し生成することです。詳細については、リンク：/less/parent_selector2 [ここをクリック]をご覧ください。

LESS-その他の関数

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

次の表は、その他の機能のすべてのタイプを示しています-

Sr.No.	Functions & Description
1	color 色を表す文字列です。
2	image - size ファイルの画像の寸法を調べるために使用されます。
3	image - width ファイルの画像の幅を調べます。
4	image - height ファイルの画像の高さを調べます。
5	convert 数値は、ある単位から別の単位に変換されます。
6	data - uri データURIは、Webページでリソースをインラインで取得する統一リソース識別子（URI）スキーマです。
7	default デフォルト関数は、ガード条件内で使用可能で、他のどのミックスインとも一致しない場合にのみtrueを返します。
8	unit デフォルト関数は、ガード条件内で使用可能で、他のミックスインと一致しない場合にのみtrueを返します
9	get - unit get-ユニット関数は、引数が存在するユニットを、番号とユニットとともに返します。
10	svg - gradient svg-gradientは、ある色から別の色への移行です。同じ要素に多くの色を追加できます。

LESS-文字列関数

説明

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

エスケープ
e
％フォーマット *交換する

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

Sr.No. Types & Description Example

1

Escape*

特殊文字のURLエンコードを使用して、文字列または情報をエンコードします。、、 / 、？、 @ 、＆、 + 、〜、！、 $ 、* 'などの一部の文字と一部の文字をエンコードできませんでした *\ 、＃、 ^ 、（、）、* \ {、} 、：、> 、 <*、] *のようにエンコードできます。 * [*および *= 。

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

エスケープされた文字列を出力します-

Hello%21%21%20welcome%20to%20finddevguides%21

2

e

パラメータとして文字列を使用し、引用符なしで情報を返す文字列関数です。 _〜 "some content" _エスケープされた値と数値をパラメーターとして使用するCSSエスケープです。

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

エスケープされた文字列を出力します-

filter: Hello!! welcome to finddevguides!;

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 finddevguides!");

文字列を次のように置き換えます-

"Welcome, to finddevguides!"

LESS-リスト関数

説明

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

次の表は、LESSで使用されるリスト関数のリストです-

Sr.No.

Function & Description

1

Length

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

2

Extract

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

LESS-数学関数

説明

数学関数には、ラウンド、平方根、パワー値、モジュラス、パーセンテージなどの数値演算を実行するために使用されるメソッドが含まれます。

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

Sr.No. Function & Description Example

1

ceil

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

ceil(0.7)

それは数を丸めます-

2

floor

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

floor(3.3)

それは数を丸めます-

3

percentage

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

percentage(0.2)

数値をパーセント文字列に変換します-

20%

4

round

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

round(3.77)

それは、数値を丸め値に変換します-

5

sqrt

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

sqrt(25)

それは数の平方根を定義します-

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値を計算します-

11

tan

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

tan(60)

日焼けの値を次のように計算します-

0.320040389379563

12

atan

指定した数の逆正接（正接の逆数）を指定します。

atan(1)

それはatan値を表示します-

0.7853981633974483

13

pi

pi値を返します。

pi()

パイ値を決定します-

3.141592653589793

14

pow

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

pow(3,3)

それは、電力値を指定します-

15

mod

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

mod(7,3)

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

16

min

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

min(70,30,45,20)

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

17

max

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

max(70,30,45,20)

それは最大値を返します-

LESS-型関数

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

次の表は、LESSで使用される_Type Functions_を示しています。


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
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
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
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
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
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
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
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
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
@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は、さまざまな方法で色を変更および操作するための多数の便利な色関数を提供します。 LESSは、以下の表に示すように、色定義関数の一部をサポートしています-

Sr.No. Function & Description Example

1

rgb

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

red -0〜255の整数または0〜100％のパーセンテージが含まれます。
緑-0〜255の整数または0〜100％の割合が含まれます。
blue -0〜255の整数または0〜100％のパーセンテージが含まれます。

rgb(220,20,60)

rgb値を使用して色を変換します-

#dc143c

2

rgba

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

red -0〜255の整数または0〜100％のパーセンテージが含まれます。
緑-0〜255の整数または0〜100％の割合が含まれます。
blue -0〜255の整数または0〜100％のパーセンテージが含まれます。
alpha -0〜1の数値または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までの整数が含まれます。
彩度-0〜1の数値または0〜100％の割合が含まれます。
明度-0〜1の数値または0〜100％の割合が含まれます。

hsl(120,100%, 50%)

HSL値を使用して色オブジェクトを返します-

#00ff00

5

hsla

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

hue -度を表す0から360までの整数が含まれます。
彩度-0〜1の数値または0〜100％の割合が含まれます。
明度-0〜1の数値または0〜100％の割合が含まれます。
alpha -0〜1の数値または0〜100％の割合が含まれます。

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

HSLA値を使用して色オブジェクトを指定します-

rgba(255, 0, 0, 0.5);

6

hsv

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

hue -度を表す0から360までの整数が含まれます。
彩度-0〜1の数値または0〜100％の割合が含まれます。
値-0〜1の数値または0〜100％の割合が含まれます。

hsv(80,90%,70%)

それは次のようにhsv値を持つカラーオブジェクトを変換します-

#7db312

7

hsva

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

hue -度を表す0から360までの整数が含まれます。
彩度-0〜1の数値または0〜100％の割合が含まれます。
値-0〜1の数値または0〜100％の割合が含まれます。
alpha -0〜1の数値または0〜100％の割合が含まれます。

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

それは、HSVA値を持つカラーオブジェクトを指定します-

rgba(125, 179, 18, 0.6)

LESS-カラーチャネル関数

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


background: hue(hsl(75, 90%, 30%));
background: saturation(hsl(75, 90%, 30%));
background: lightness(hsl(75, 90%, 30%));
background: hsvhue(hsv(75, 90%, 30%));
background: hsvsaturation(hsv(75, 90%, 30%));
background: hsvvalue(hsv(75, 90%, 30%));
background: red(rgb(5, 15, 25));
background: green(rgb(5, 15, 25));
background: blue(rgb(5, 15, 25));
background: alpha(rgba(5, 15, 25, 1.5));
background: luma(rgb(50, 250, 150));
background: luminance(rgb(50, 250, 150));

LESS-カラー操作

説明

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

Sr.No.	Directives & Description
1	saturate 要素の色の強度または彩度を変化させます。
2	desaturate 要素の色の強度または彩度を下げます。
3	lighten 要素の色の明度を上げます。
4	darken 要素の色の強度または彩度を変化させます。
5	fadein 選択した要素の不透明度を高めます。
6	fadeout 選択した要素の不透明度を下げます。
7	fade 選択した要素の色の透明度を設定するために使用されます。
8	spin 選択した要素の色の角度を回転するために使用されます。
9	mix 2つの色と不透明度を混合します。
10	tint 色の割合を減らすと、色と白が混ざります。
11	shade 色の割合を減らすと、色と黒が混ざります。
12	greyscale 選択した要素の色から彩度を破棄します。
13	contrast 要素の色のコントラストを設定します。

LESS-カラーブレンディング関数

この章では、LESSの Color Blending Functions を理解します。これらは、Photoshop、Fireworks、GIMPなどの画像エディターで使用される同様の操作で、CSSカラーを画像に一致させます。

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

Sr.No.	Functions & Description
1	multiply 2つの色を乗算し、結果の色を返します。
2	screen 2色を取り、より明るい色を返します。 _multiply_関数の反対に機能します。
3	overlay _multiply_と_screen_の効果を組み合わせて結果を生成します。
4	softlight _overlay_と同様に機能しますが、色の一部のみを使用し、他の色をソフトハイライトします。
5	hardlight _overlay_と同様に機能しますが、色の役割が逆になります。
6	difference 最初の入力色から2番目の入力色を減算します。
7	exclusion _difference_関数と同様に機能しますが、コントラストは低くなります。
8	average チャンネル（RGB）ごとに2つの入力色の平均を計算します。
9	negation _difference_関数とは逆に機能し、2番目の色から最初の色を減算します。

LESS-コマンドラインの使用法

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

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

次のコマンドを使用して、lesscをnpm（node package manager）でインストールし、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* にはバイナリがリポジトリに含まれます。 Windows、OS X、および* nix上のnodejsで動作します。

コマンドラインの使用

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

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

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

lessc stylesheet.less stylesheet.css

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

lessc -x stylesheet.less stylesheet.css

オプション

次の表は、コマンドラインの使用で使用されるオプションを示しています-


lessc -help
lessc -h
lessc --include-path = PATH1;PATH2
lessc -M
lessc --depends
lessc --no-color
lessc --no-ie-compat
lessc --no-js
lessc --lint
lessc -l
lessc --silent
lessc -s
lessc --strict-imports
lessc --insecure
lessc -version
lessc -v
lessc -x
lessc --compress
lessc --source-map
lessc -source-map = file.map
lessc --source-map-rootpath = dev-files/
lessc --source-map-basepath = less-files/
lessc --source-map-less-inline
lessc --source-map-map-inline
lessc --source-map-url = ../my-map.json
lessc -rp=resources/
lessc --rootpath=resources/
lessc -ru
lessc --relative-urls
lessc -sm = on
lessc --strict-math = on
lessc -su = on
lessc --strict-units = on
lessc --global-var = "background = green"
lessc --modify-var = "background = green"
lessc --url-args = "arg736357"
lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
lessc --clean-css
lessc --plugin = clean-css = "advanced"

少ない-ブラウザでの使用を少なくする

Lessは、サーバー側ではなく、必要なときに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 <script tag <link tag_は重要度レベルです。
データ属性をキャメルケースに書き込むことはできません。リンクタグオプションは時間オプションとして表されます。
文字列以外の値を持つデータ属性は、JSONで有効である必要があります。

監視モード

監視モードを有効にするには、envオプションを_development_に設定し、less.jsファイルの追加後に_less.watch（）を呼び出します。一時的に監視モードを有効にする場合は、＃！watch_をURLに追加します。

<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_オプションはFireLESSで使用できます（元のLESSファイル名とLESS生成CSSスタイルの行番号を表示します。）

オプション

スクリプトファイル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 -ブール型です。ページにファイルプロトコルが存在する場合、非同期でインポートするかどうかを要求できます。
機能-オブジェクトタイプです。
logLevel -これは数値型です。 javascriptコンソールにログレベルが表示されます。
2：情報とエラー
1：エラー
0：なし
poll -監視モードでは、ポーリング間の時間はミリ秒単位で表示されます。これは整数型です。デフォルトでは、1000に設定されています。
relativeUrls -URLは相対に調整されます。デフォルトでは、このオプションはfalseに設定されています。これは、URLがエントリなしのファイルに既に関連していることを意味します。これはブール型です。
globalVars -グローバル変数のリストをコードに挿入します。文字列型変数は引用符で囲む必要があります
modifyVars -グローバル変数オプションとは異なります。 lessファイルの最後に宣言を移動します。
rootpath -すべてのURLリソースの開始時にパスを設定します。
useFileCache -セッションごとのファイルキャッシュを使用します。 lessファイルのキャッシュは、modifyVarsを呼び出すために使用されます。modifyVarsでは、すべてのlessファイルが再び取得されることはありません。

LESS-ブラウザのサポート

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

スペルミス、
色の変化、
テクスチャー
Look
リンクなど

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

PhantomJSは_Function.prototype.bind_関数を実装しないため、PhantomJSで実行するには_es5 shim_ JavaScriptエンジンを使用する必要があります。ユーザーは、プロダクションでクライアント側のLESSを使用して、テーマに影響を与える変数を調整し、リアルタイムでそれらを表示できます。

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

LESS-プラグイン

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

コマンドライン

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

npm install less-plugin-clean-css

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

lessc --plugin = path_to_plugin = options

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

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

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プラグインのリスト

次の表は、LESSで使用可能なプラグインの一覧です。

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

Sr.No.	Plugins & Description
1	Autoprefixer LESSからの変換後にCSSにプレフィックスを追加するために使用されます。
2	CSScomb スタイルシートのメンテナンスを改善するのに役立ちます。
3	clean-css LESSからのCSS出力を縮小します。
4	CSSWring LESSからのCSS出力を圧縮または縮小します。
5	css-flip CSSは、左から右（LTR）または右から左（RTL）から生成するために使用されます。
6	functions LESS自体にLESSの機能を書き込みます。
7	glob 複数のファイルをインポートするために使用されます。
8	group-css-media-queries Lessの後処理を行います。
9	inline-urls URLをデータURIに自動的に変換します。
10	npm-import それはnpmパッケージからより少ないためにインポートします。
11	pleeease Lessの後処理に使用されます。
12	rtl LESSはltr（左から右）からrtl（右から左）に反転します。

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

Sr.No.	Importers & Description
1	Bootstrap ブートストラップLESSコードは、カスタムLESSコードの前にインポートされます。
2	Bower Resolve LESSファイルはBowerパッケージからインポートされます。
3	Cardinal CSS for less.js カスタムLESSコードの前に、CardinalのLESSコードがインポートされます。
4	Flexbox Grid 最も一般的にインポートされるフレームワークまたはライブラリインポーター。
5	Flexible Grid System Flexible Grid Systemをインポートします。
6	Ionic イオンフレームワークをインポートします。
7	Lesshat Lesshatミックスインをインポートします。
8	Skeleton スケルトンより少ないコードをインポートします。

関数ライブラリ

Sr.No.

Importers & Description

1

advanced-color-functions

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

2

cubehelix

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

3

lists

これは、操作関数ライブラリをリストします。

プラグイン作成者向け

LESSを使用すると、作成者はより少ないものと組み合わせることができます。

{
   install: function(less, pluginManager) {
   },

   setOptions: function(argumentString) {
   },

   printUsage: function() {
   },

   minVersion: [2, 0, 0]
}

pluginManager は、ファイルマネージャー、ポストプロセッサー、または訪問者を追加できるホルダーを提供します。
setOptions 関数は文字列を渡します。
printUsage 関数を使用してオプションを説明します。

LESS-プログラムによる使用

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

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

function(error) {
});

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

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

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

sourceMap_オプションを使用すると、_sourceMapURL _、 sourceMapBasepath 、 sourceMapRootpath 、 outputSourceFiles 、 sourceMapFileInline_などのソースマップオプションを設定できます。ここで考慮する必要があるのは、_sourceMap_オプションがless.jsで使用できないことです。

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

less.logger.addListener({
   debug: function(message) {
   },

   info: function(message) {
   },

   warn: function(message) {
   },

   error: function(message) {
   }
});

上記で定義された関数はオプションです。エラーが表示された場合、_less.render_にある callback または promise にエラーを渡します。 Less-online-compilers

少ない-GUI

この章では、_LESS_の_GUIs_を理解します。プラットフォームに応じて、さまざまなLESSツールを使用できます。 _command line_の使用法とツールについては、次のリンクをクリックしてください：/less/less_command_line_usage [link]。

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

Sr.No.	Tools & Description
1	Crunch 2! Windows、Mac _、 Linux_などのプラットフォームをサポートします。エディターに統合コンパイルを提供します。
2	Mixture これは、デザイナーや開発者が使用するラピッドプロトタイピングおよび静的サイト生成ツールです。すばやく効率的で、エディターでうまく機能します。素晴らしいツールとベストプラクティスのコレクションをまとめています。
3	SimpLESS これは、最小限のLESSコンパイラです。ドラッグアンドドロップおよびコンパイル機能を提供します。 SimpLESSは、SimpLESSのユニークな機能であるhttp://prefixr.com [prefixr]を使用して、CSSを_prefixing_サポートします。 Titaniumプラットフォーム上に構築されています。
4	Koala LESS、SASS、CoffeeScriptのコンパイルに使用されます。コンパイルエラー通知のサポートやコンパイルオプションのサポートなどの機能を提供します。

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

Sr.No.

Tools & Description

1

Prepros

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

2

WinLess

当初はLESS.appのクローンでしたが、いくつかの設定があり、より多くの機能を完全に取り入れています。コマンドライン引数からの開始をサポートしています。

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

Sr.No.

Tools & Description

1

CodeKit

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

2

LiveReload

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

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

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

LESS-エディターとプラグイン

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

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

Sr.No.	Editors and IDEs & Description
1	Crunch! Windows、Mac _、 Linux_などのクロスプラットフォームをサポートしています。エディターに統合コンパイルを提供します。
2	Mindscape Web Workbench CoffeeScript、SASS、Compass、LESSの編集機能を提供し、Visual Studioでの最新の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	jetBrains WebStorm and PhpStorm WebStromは軽量で強力なIDEです。 Node.jsを使用した複雑なクライアントサイドおよびサーバー開発に最適です。 PhpStormはPHP IDEであり、コードの深い理解をサポートし、すべての主要なツールとフレームワークに対して最高のコーディング支援とサポートを提供します。
8	Brackets 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-Kit Tools これは、HTML5、CSS3、JavaScriptなどの最新のWebエディターです。これにより、最新の標準に準拠したエディターからプロジェクトを編集、プレビュー、検証、公開、管理できます。

崇高なテキスト2および3

sublime textは、次の表にリストされているように、LESSのさまざまなオプションを提供します-

Sr.No.	Options & Description
1	Less-sublime 崇高なテキストのLESS構文は、スニペットとともに_.less_ファイルの構文の強調表示を提供します。
2	Sublime-Less-to-CSS _Sublimeテキスト2_および_3_プラグインは、保存時に.less_ファイルをCSSにコンパイルします。 PATHに lessc をインストールする必要があります。
3	Less-build-sublime _sublime text 2_用のLESSビルドシステムは、LESSファイル用に2つのビルドシステムを提供します。
4	SublimeOnSaveBuild [保存]をクリックしたときにビルドをトリガーする_sublime text 2_のシンプルなプラグインです。 LESS、Compass、およびその他のプリプロセッサでうまく機能します。

エクリプス

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

Sr.No.

Plugins & Description

1

Eclipse Less Plugin

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

2

Transpiler Plugin

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

ビジュアルスタジオ

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

Sr.No.	Options & Description
1	CSS Is Less この拡張により、CSS言語サービスでLESSファイルが開かれます。
2	Web Essentials 2012 この拡張機能を使用すると、一般的なタスクをはるかに簡単に実行でき、Web開発者向けの便利な機能がVisual Studioに追加されます。
3	Web Essentials 2013 特定の言語やエディターに固有ではない多くの新機能でVisual Studioを拡張します。
4	Web Tools 2013 これは、ASP.NETが関係する開発タスクで役立ちます。

ドリームウィーバー

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

これは、Webデザイナーおよび開発者がアプリケーションおよびWebサイトを作成するために使用するAdobeアプリケーションです。
ブラウザ、デバイス、タブレットなど、複数のプラットフォームで機能します。
Webデザイナーは、Dreamweaverを使用してWebサイトのプロトタイプを作成します。
DMXzone Less CSS Compilerは、すべてのLESS CSSの機能をDreamweaverで直接作成します。

Notepad ++ 6.x

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

Notepad ++は、タブ付き編集をサポートする無料のテキストエディタおよびソースコードエディタです。つまり、単一のウィンドウで複数の開いているファイルを操作します。
LESS for Notepad ++は、.lessファイルの構文の強調表示または色付けを提供するxmlファイルです。詳細については、https://github.com/azrafe7/LESS-for-Notepad-plusplus [link]をクリックしてください。
Notepad ++をインストールするには、https://sourceforge.net/projects/notepad-plus/#How_to_install_user_defined_language_files [link]をクリックしてください。

LESS-サードパーティコンパイラ

Node.jsコンパイラー

LESSに使用されるNode.jsコンパイラは次のとおりです。

grunt-contrib-less

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

assemble-less

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

gulp-less

Gulp用のLESSプラグインです。 _gulp-minify-css_は、CSSを縮小するために使用されます。 _gulp-sourcemaps_は、sourcemapsライブラリの生成に使用されます。

RECESS

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

autoless

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

Connect Middleware for Less.js

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

その他の技術

以下は、LESSコードのコンパイルに役立つ他のいくつかの技術です。

Wro4jランナーCLI

あなたはhttps://wro4j.readthedocs.io/en/stable/wro4jRunner/[wro4j-runner.jar]をダウンロードすることができ、次のコマンドを使用してCSSでLESSコードをコンパイルすることができます-

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

次のリンクにアクセスして、https://code.google.com/p/wro4j/wiki/wro4jRunner [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]

Less.js for windowsの詳細については、次のリンクをご覧ください。

ドットレス

以下は、Windowsでドットなしで実行するコマンドラインコンパイラです。

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

次のリンクにアクセスして、http：//www.dotlesscss.org/[dotless]について詳しく知ることができます。

LESS-フレームワーク

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

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

Sr.No.	Framework & Description
1	1pxdeep 強力な配色コントロールを提供するフラットなBootstrap 3テーマです。
2	Bootflat これは、Bootstrapに基づいたオープンソースのフレームワークです。
3	BootPress フラットファイルCMSに基づくPHPフレームワークです。
4	Bootstrap より高速で簡単なWeb開発のための強力なモバイルファーストフロントエンドフレームワークです。
5	Bootstrap a11y theme Web開発に簡単にアクセスできます。
6	Bootswatch Bootstrapに無料のテーマを提供するオープンソースのテーマです。
7	Cardinal レスポンシブWebサイト、ユーザーインターフェイス、およびアプリケーションのCSSを維持できるモバイルファーストCSSフレームワークです。
8	CSSHorus これは、モバイルWebサイトの簡単な開発を提供するライブラリです。
9	Flat UI Free これは、基本的で複雑なコンポーネントを含むBootstrap 3に基づいており、Bootstrapのテーマデザインを提供します。
10	frontsize これは、ウィジェットを構築するための一連のツールを含むフロントエンドフレームワークです。
11	InContent CSS3およびSASS/LESSを使用して画像の説明を指定します。
12	Ink レスポンシブWebインターフェイスを作成します。
13	JBST これは、WordPressの子テーマの作成に使用される強力なテーマフレームワークであり、スタンドアロンのWebサイトビルダーとして使用されます。
14	KNACSS レスポンシブで拡張可能なスタイルシートを使用してHTML/CSSプロジェクトを開発するために使用されます。
15	Kube プロのデザイナーや開発者に使用されるCSSフレームワークです。
16	Metro UI CSS これは、プロジェクトでWindows Metroスタイルを作成するために使用されるフロントエンドフレームワークです。
17	Pre LESSを使用するのはCSSフレームワークです。
18	prelude LESSを使用するフロントエンドCSSフレームワークです。
19	Schema 複雑なWebサイトの構築を支援する、軽量で応答性の高いフレームワークです。
20	Semantic UI HTMLを使用してレスポンシブレイアウトを作成するユーザーインターフェイスフレームワークです。
21	UIkit これは、HTML、CSS、およびJSコンポーネントを含むフロントエンドフレームワークであり、Webアプリケーションの使用と開発が簡単です。
22	ngBoilerplate これは、AngularJSプロジェクトに使用される、うなり声ベースのビルドシステムです。
23	less-rail RailsプロジェクトにLess.jsを使用する動的なスタイルシート言語です。
24	Wee これは、レスポンシブWebプロジェクトを開発するためのHTML、CSS、およびJavaScriptブートストラップコンポーネントを含むフロントエンドフレームワークです。

グリッドシステム

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

Sr.No.	Framework & Description
1	Flexible Grid System これは、Webプロジェクトを柔軟な方法で作成するCSSフレームワークです。
2	adaptGrid Webアプリケーションを開発するためのレスポンシブグリッドシステムです。
3	Fluidable これは、LESSプリプロセッサに基づいた軽量のレスポンシブグリッドシステムです。
4	Golden Grid System レスポンシブデザインのグリッドシステムです。
5	LESS Zen Grid サブピクセルの丸め問題を解決するために使用されます。
6	Order.less これは、アライメント、グリッドシステム、モジュラースケールに使用されるLESSライブラリです。
7	responsibly これは、カスタマイズ可能なスタンドアロンのグリッドシステムです。
8	Responsive Boilerplate これは、サイトのレスポンシブWebデザインを作成するために使用される軽量のグリッドシステムです。
9	Semantic.gs これは、オペレーティングシステムへのWebブラウザのデフォルトの配布です。

Mixinライブラリ

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

Sr.No.	Framework & Description
1	3L LESSプリプロセッサ用の最新のCSS3機能を提供します。
2	animate プロジェクトで使用されるブラウザアニメーションに使用されるライブラリです。
3	Clearless スタイルを破壊したり、スタイルシートに過剰なサイズを作成したりすることなく、再利用可能なLESSミックスインを使用します。
4	Css3LessPlease css3please.comをLESSミックスインに変換し、CSSを実行すると要素が即座に変更されます。
5	CssEffects LESSミックスインとして記述されたCSSスタイル効果を提供します。
6	Cssowl これは、LESS、SASS、およびスタイラスをサポートするミックスインライブラリです。
7	cube.less CSSのみを使用して作成された3Dアニメーションキューブです。
8	tRRtoolbelt.less これは、LESSファイルでアクションを実行するためのミックスインと機能を提供するライブラリです。
9	est LESSに基づいているため、LESSコードをより効率的に記述できます。
10	Hexagon サイズと色でCSS六角形を作成します。
11	homeless これは、Less.jsに役立つ関数を含むミックスインライブラリです。
12	LESS Elements LESSプリプロセッサ用のミックスインのコレクションです。
13	LESS Hat これは、すべてのブラウザのCSSのエクスポートを支援し、多数のシャドウ、グラデーション、アニメーションなどを作成するミックスインライブラリです。
14	lessley LESSで書かれたテストスイートです。
15	LESS-bidi これは、コードを重複させることなく双方向スタイリングを提供するLESSミックスインのコレクションです。
16	LESS-Mix これは、LESSで記述されたmixinライブラリです。
17	media-query-to-type Internet Explorer 8以前のバージョンがコンテンツにアクセスできるようにするメディアクエリの作成に使用されます。
18	More-Colors.less Webアプリケーションの設計中に色を操作するための変数を提供します。
19	more-less これは、ブラウザ間の互換性のためにCSSコードを記述できるライブラリです。
20	More.less これは、コンパスとTwitterブートストラップの組み合わせであり、CSS3とクロスブラウザーミックスインを使用して、LESSにより多くの機能を提供します。
21	more-or-less less.js用の強力なミックスインを提供します。
22	normalize.less LESSを使用して正規化されたCSSを提供します。
23	Oban これは、Webアプリケーションの開発プロセスを高速化するミックスインのコレクションです。
24	Preboot これは、より良いCSSを記述するためにミックスインと変数を使用するLESSサービスのセットであり、Bootstrapから形成されます。
25	prelude-mixins LESS mixinライブラリです。
26	Shape.LESS アプリケーションのさまざまな形状を指定するための多数のミックスインを提供します。

Sr.No.	Type Functions & Description	Example
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 パラメータとして値を取り、文字列の場合は_true_を返し、そうでない場合は_false_を返します。	`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 パラメータとして値を取り、値がキーワードの場合は_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 パラメータとして値を取り、値が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`

Sr.No.	Options & Description	Command
1	Help 利用可能なオプションとともにヘルプメッセージが表示されます。	`lessc -help lessc -h`
2	Include Paths ライブラリへの利用可能なパスが含まれています。これらのパスは、Lessファイルで簡単かつ比較的参照できます。ウィンドウ内のパスは、コロン（:)またはセミコロン（;）で区切られます。	`lessc --include-path = PATH1;PATH2`
3	Makefile makefileインポート依存関係リストを出力としてstdoutに生成します。	`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 出力パスから削除する必要があるパスが指定されています。ベースパスはrootpathオプションの反対です。	`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は常にベースファイルに関連するように書き換えられます。	`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-quick-guide

少ない-概要

なぜ少ないのですか？

歴史

特徴

利点

デメリット

LESS-インストール

LESSのシステム要件

LESSのインストール

例

こんにちは

style.less

style.css

出力

LESS-ネストされたルール

説明

例

style.less

style.css

出力

LESS-ネストされたディレクティブとバブリング

説明

例

style.less

style.css

出力

LESS-操作

説明

例

style.less

style.css

出力

少ない-エスケープ

説明

例

style.less

style.css

出力

LESS-機能

説明

例

style.less

style.css

出力

LESS-名前空間とアクセサ

説明

例

style.less

style.css

出力

少ない-範囲

説明

例

style.less

style.css

出力

少ない-コメント

説明

例

style.less

style.css

出力

LESS-インポート

説明

例

myfile.less

style.less

style.css

出力

LESS-変数

少ない-拡張

例

extend_syntax

style.less

style.css

出力

拡張構文

例

extend_syntax