LESS-プラグイン

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

コマンドライン

コマンドラインを使用してプラグインをインストールするには、最初に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 関数はオプションを説明するために使用されます。