Drupalでlessを使用する

LESSは、標準のCSSの機能を拡張する独自のスタイルマークアップ言語です。

あなたはプロジェクトの公式ウェブサイトで以下についてもっと読むことができ、その使用の素晴らしい例があります。



以下は、すでに非常に人気のある多くのライブラリを作成しています。 たとえば、twitterブートストラップやセマンティックグリッドシステムなど。



この言語を使用してDrupalプロジェクトに適用するには、* .less拡張子を持つファイルを理解するようにブラウザーに教える必要があります。 このために、小さなjsファイルless.jsがあります。これは、スタイルを持つファイルの後に接続されます。 (実際、このjsはブラウザーに「未知の拡張子を持つファイルを理解するように教える」ことはありません。単純なcssファイルに変換するだけです)これには悪い側面があります。 これにより、ページのレンダリング時間が短縮されます。 したがって、別のオプションがあります-サーバー側で変換すると、ブラウザは通常のCSSファイルを受け入れます。



次に、CMF Drupalを使用する際にサーバーで変換を減らす方法を示します。



最初に、次のモジュールをインストールする必要があります。

drupal.org/project/libraries

drupal.org/project/less

次に、 leafo.net / lessphpライブラリをダウンロードして、ライブラリフォルダーに配置します。

/サイト/サイト/すべて/ライブラリまたは/サイト/サイト/ドメイン名/特定のサイトのライブラリ。

その結果、ファイル「lessc.inc.php」は次の場所で利用可能になります。

'/サイト/サイト/すべて/ライブラリ/ lessphp / lessc.inc.php'または '/サイト/サイト/ドメイン名/ライブラリ/ lessphp / lessc.inc.php'。

phpライブラリをインストールしたら、以前にダウンロードしたモジュールを有効にします。



これで、テーマの情報ファイル内の少ないファイルを安全に接続できます。

スタイルシート[すべて] [] = less / common.less

ご覧のとおり、この場合、オプションのメディアルールは機能します。

all-どこでも適用

画面-Webページを表示するときにのみ適用

print-印刷バージョンにのみ適用されます。



次に、lessで記述されたライブラリの接続について説明します。 セマンティックグリッドシステムを使用してこの例を検討します。



まず、次のフォルダー構造を作成します。



テーマフォルダ
 -少ない
 -ライブラリ
 ---グリッド


グリッドフォルダーに、grid.lessフレームワークファイルを配置します。

そして、ファイルのless 2フォルダー内:

custom.grid.less(ページレイアウト自体)



@columns: 12; @column-width: 60; @gutter-width: 20; article { .column(9); } section { .column(3); }
      
      







common.grid.less(ライブラリとユーザーファイルを接続し、件名で接続します)



 @import 'libraries/grid/grid.less'; @import '../../custom.grid.less';
      
      







複数のファイルを接続し、相対パスを使用する場合、後続の各ファイルは、その前にある接続ファイルを基準にして指定する必要があることに注意してください。



キャッシュをクリアすると、lessファイルが取得されてcssに変換されます。 ページを更新するたびに、処理されるものは少なくなります。



少ないキャッシュをリセットするには、admin / config / development / lessページに移動し、「LESS LESS files」ボタンをクリックします。 開発時には、「LESS開発者モード」チェックボックスが役立ちます。有効にすると、ページが更新されるたびに変換される回数が少なくなります。



All Articles