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

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-using-less-in-browser

目次