ホームページ >ウェブフロントエンド >htmlチュートリアル >ブラウザ側Less_html/css_WEB-ITnose
ブラウザ側Less_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:53:071142ブラウズ
概要:
以前のプロジェクトでも Less を使用しており、現在担当しているプロジェクトでも使用する予定なので、今後の参考のために Less についてまとめておきます。この記事では主にブラウザ側での Less の使い方について説明します。
はじめに:LESS は、Alexis Sellier によって設計された動的カスケード スタイル シート言語です。 LESS はオープンソースであり、最初のバージョンは Ruby で作成されましたが、後続のバージョンでは、Ruby は徐々に JavaScript に置き換えられました。 JavaScript のおかげで、LESS はクライアント (IE6+、Webkit、Firefox) またはサーバー (Node.js、Rhino) で実行できます。
基本的に、LESS には一連のカスタム文法とパーサーが含まれており、ユーザーはこれらの文法に基づいて独自のスタイル ルールを定義し、最終的にはパーサーによってコンパイルされて、対応する CSS ファイルが生成されます。 LESS は、CSS の元の機能を調整したり、CSS を置き換えたりするのではなく、既存の CSS 構文に基づいて CSS に手続き型言語機能を追加します。 LESS ファイルに CSS ルールに従ってスタイルを記述することもできます。
意味:開発効率を向上させるために、従来のスタイルの記述方法を変更し、オブジェクト指向の方法で記述します。
LESS の導入:まず、導入された rel 属性の値は、stylesheet/less の .less スタイル シートです。以下のように:
be6af126b5b9605aa885be2df9e64f05
HTML ページをレンダリングするときは、less ファイルを CSS にコンパイルする必要があります。ファイル。さまざまな方法でそれを実現できます。 Node.js などのサーバー側では、専用のコンパイルの少ないモジュールを用意しています。クライアント上にある場合は、LESS 公式 Web サイトからless.js ファイルをダウンロードし、次のように HTML ページに導入する必要があります:
93d12a5fc725f116201075073e82265d8f8620168408bde395d4d31dbd98e13ad6d620ebf9e3743a2199c849aed37d7a 例:
<!-- set options before less.js script --> <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>
ただし、これはすべての最初のリンク タグに影響します。次のように、指定したスクリプト タグにオプションを追加することもできます。
<script src="less.js" data-env="development"></script>
または、次のように、リンク設定パラメータの特定のオプションをオーバーライドすることもできます。
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less"> 注:
If 観測モードを使用する場合、設定パラメータの env は開発です。次に、Less.js ファイルがロードされた後、less.watch() を次のように呼び出します:
<script>less = { env: 'development'};</script><script src="less.js"></script><script>less.watch();</script> 注:
観察モードが有効な場合、ブラウザは継続的にlessファイルをリクエストし、それが有効であるかどうかを判断します。 Last-Modified パラメータに基づいてページを再レンダリングすると、パフォーマンスが大幅に消費されるため、オンラインで監視モードを有効にしないでください。開発環境の場合、これにより効果を観察しやすくなります。
完全なデモ:Reset.less はブラウザのデフォルト スタイルをリセットするもので、config.js は次のようにブラウザ オプションの設定パラメータです:
config.js
less = { env: "development", // or "production" async: false, // load imports async fileAsync: false, // load imports async when in a page under // a file protocol poll: 1000, // when in watch mode, time in ms between polls functions: {}, // user functions, keyed by name dumpLineNumbers: "all", // "comment" or "mediaQuery" or "all" relativeUrls: false,// whether to adjust url's to be relative // if false, url's are already relative to the // entry less file rootpath: ":/"// a path to add on to the start of every url //resource};
index.html
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet/less" type="text/css" href="./less/reset.less" /> <link rel="stylesheet/less" type="text/css" href="./less/styles.less" /> <script src="./js/config.js"></script> <script src="./js/less-1.3.3.min.js"></script> <script>less.watch();</script></head><body></body></html>パラメータの詳細:
async
タイプ: Boolean
デフォルト: false
重要なファイルを非同期でロードするかどうか
dumpLineNumbers
タイプ: String
Options: ''| ments'|'メディアクエリ'|' all'
デフォルト: ''
設定すると、出力 CSS ファイルにソース コード行情報が追加されます。これは、特定のルールがどこから来たのかをデバッグおよび分析するのに役立ちます。
comments オプションはユーザーが理解できるコンテンツを出力するために使用され、
mediaquery オプションは Firefox プラグインを使用して
env
タイプ: 文字列
オプション: 開発または運用
デフォルト: ページの URL によって異なります
実行環境、運用環境の場合、CSS ファイルはローカルにキャッシュされ、情報はコンソールに出力されません。 URL が file:// で始まる場合、ローカルである場合、または標準ポートがない場合、これは開発モードとみなされます。
例:
less = { env: 'production' };
errorReporting
Type: String
Options: html|console|function
Default: html
コンパイルが失敗した場合のエラー報告方法を設定します。
fileAsync
タイプ: Boolean
デフォルト: false
ファイルプロトコルでページにアクセスする際に、ファイルを非同期で導入するかどうか
関数
タイプ: object
ユーザー定義関数
e.g.
less = {
関数: {
myfunc: function() {
return new(less.tree.Dimension)(1);
}
}
};
Less 関数と同じように使用できます。
.my-class {
border-width:unit(myfunc(), px);
}
logLevel
Type: Number
Default: 2
コンソールに出力されるログの数。本番環境の場合、情報は出力されません。
2 - 情報とエラー1 - エラー0 - なし
poll
タイプ: Integer
デフォルト: 1000
観察モードでは、テストの時間。
relativeUrls
タイプ: Boolean
デフォルト: false
相対パス強度を使用します。 FALSE に設定すると、URL はルート ディレクトリ ファイルを基準とします。
globalVars
タイプ: オブジェクト
デフォルト: 未定義
グローバル変数リスト挿入コード。 「文字列」型の変数には明示的に引用符を含める必要があります。
less.globalVars = { myvar: "#ddffee", mystr: ""quoted"" };
このオプションは、ファイルによって参照できる変数を定義します。この変数はファイル内で再定義することもできます。
modifyVars
タイプ: オブジェクト
デフォルト: 未定義
globalVars と同じ形式。
globalVars パラメーターとは異なり、ファイルの最後に定義されます。つまり、ファイルで定義した内容がオーバーライドされます。
rootpath
タイプ: String
デフォルト: false
すべてのファイルがこのディレクトリから開始されるように設定します。
useFileCache
タイプ: ブール型
デフォルト: true (v2 より前では false)
セッションごとのファイル キャッシュを使用するかどうか。キャッシュされたファイルはmodifyVarsを使用できますが、すべてのファイルを再度取得することはありません。監視モードを使用するか、true に設定してfreshloadを呼び出すと、実行前にキャッシュがクリアされます。