LESS（動的スタイルシート言語）とリソースローダー

現在、私の現在のプロジェクトでは、CSSを使用してLESSに変更しています。私が質問に出くわす前に言及しておきたいことは、LESS（動的スタイルシート言語）とリソースローダー

1）プロジェクトは純粋にクライアント側（Html/Js/Css）なので、Webサイトのサーバー側コンポーネントはありませんCORSを経由して） 2）リソースローディングフレームワーク経由でほぼすべてをロードしていますが、現在はyepnopeを使用しています。

上記のように、クライアント側で処理するLESSスタイルを取得する必要がありますが、ローダーとより多くのCSS/最初のページの負荷が発生した後にロードすることができます私は思っていた場合：

1）クライアント側の処理を使用する場合のコンテンツローダーそれが言うように：

Client-side usage 

Link your .less stylesheets with the rel set to “stylesheet/less”: 

<link rel="stylesheet/less" type="text/css" href="styles.less"> 
Then download less.js from the top of the page, and include it in the <head> element of your page, like so: 

<script src="less.js" type="text/javascript"></script> 
Make sure you include your stylesheets before the script.

を私は少ないファイルを処理し、必要な要素の属性にそれらを与える方法yepnopeを伝えることができるかもしれないと思います。私はより少ないリソースを提供することができます前に少ないjavascriptそれは大丈夫でしょうか？

2）javascriptで何を処理するかを手動で教えてください。

これは、現在のページのすべてがロードされ、現在のページに表示されている新しいテンプレートを動的にロードするボタンをクリックした場合に適用されます。は、 less.jsファイルは既に含まれています。

私は何をしようとしているのか、そして2つの質問が何であるかについて、上記の内容をお伝えしたいと思います。

出典

2012-02-23 Grofit

はいできます。

この記事Load less.js rules dynamicallyを読んで、それを少し調整：あなたは、あなたの開発環境で、すべてのCSSを生成し、一つのファイルにそれを置くことができ

less.sheets.push(document.getElementById('new-style-1')); 
// Add the new less file to the head of your document  
var newLessStylesheet = $("<link />").attr("id", "new-style-1").attr("href", "/stylesheets/style.less").attr("type", 'text/less'); 
$("head").append(newLessStylesheet); 
// Have less refresh the stylesheets 
less.refresh(true);

。多くのオプションがあります。最も簡単な方法は、アプリケーションを使用することです。 Macの場合http://incident57.com/less/などのアプリを使用できます。あなたはオンラインでコンパイルすることもできます： "lessphp"として何かを検索してください。

出典

2012-02-23 10:50:11 Jaap

私はサーバーサイドのソリューションを知っています。クライアント側で純粋に評価したいのは、割り当てられた変数の一部が画面サイズや他のクライアント固有の情報に基づいている可能性があります。しかし、私はあなたが私の問題を解決したと思うことを忘れて:) – Grofit

もちろん、あなたのCSS/lessで画面サイズに応じてスタイリングを持っているメディアクエリに行くことができます。幅：http://www.w3.org/TR/css3-mediaqueries/#width またはheigthによって：http://www.w3.org/TR/css3-mediaqueries/#height – Jaap

LESS（動的スタイルシート言語）とリソースローダー

答えて

関連する問題