MODXのSassプラグイン

サッス

初心者:MODxでプラグインの操作を作成および理解する便利なレイアウトツール。



Sass-正しいCSS


古き良きCSSに欠けていたもの(CSS3まで)の多く(すべてではないが)は、カスケードスタイルシート-Sassを記述するための拡張形式で実装されています。 Ruby on Railsの支持者(Sassのルーツの由来)が「シンタックスシュガー」と愛情を込めて呼んでいることは何もありません。



Sassを「試してみて」試してみると、各レイアウトデザイナーの兵器庫にSassを導入するという考えを却下することが難しくなります。 結局のところ、たとえば、顧客の企業規模の色の値を$変数に設定すると、突然必要になった場合に、さらに簡単に「サイトをより緑に」することができて便利です。



modx

私たちの時代の動向についていく


CMS MODxの条件下でPHPでプログラミングする場合は、 sassファイルの存在と変更を監視し、テンプレートに接続されている対応するcssファイルを自動的に(再)生成するプラグインを作成することをお勧めします



「php sass parser」という検索を使用します


必要な機能の実装の1つは、 phamlpライブラリの腸内にあります。 Phamlpには別の「ルビーの甘さ」もあります-haml(HTMLの素晴らしい代替品)ですが、これは長期的な話です。



MODxのプラグイン


いくつかの簡単な手順:

1. phamlpライブラリを使用してアーカイブをダウンロードします

2.「assets / plugins / phamlp」でアーカイブを解凍します(hamlフォルダーがなくても可能です)

3.「要素」で、新しいプラグイン「SASS」を作成します

4.プラグインコードをコピーして貼り付けます。

//    (   ) $style_dir = MODX_BASE_PATH.'assets/css/'; //   $files = scandir(rtrim($style_dir,'/')); //     sass foreach ($files as $sass_file) if (is_file($style_dir.$sass_file) && (strtolower(pathinfo($style_dir.$sass_file,PATHINFO_EXTENSION))=='sass')) { //   md5   .sass  $sass_hash = hash('md5',file_get_contents($style_dir.$sass_file)); //    ( .sasshash )       -  css if (!file_exists($style_dir.$sass_file.'hash')||($sass_hash!=file_get_contents($style_dir.$sass_file.'hash'))) { //   phamlp include_once(MODX_BASE_PATH.'assets/plugins/phamlp/sass/SassParser.php'); //       sass  $sass = new SassParser(array( 'cache'=>false, 'style'=>'expanded', 'vendor_properties'=>array( 'border-radius' => array( '-moz-border-radius', '-webkit-border-radius', '-khtml-border-radius' ), 'border-top-right-radius' => array( '-moz-border-radius-topright', '-webkit-border-top-right-radius', '-khtml-border-top-right-radius' ), 'border-bottom-right-radius' => array( '-moz-border-radius-bottomright', '-webkit-border-bottom-right-radius', '-khtml-border-bottom-right-radius' ), 'border-bottom-left-radius' => array( '-moz-border-radius-bottomleft', '-webkit-border-bottom-left-radius', '-khtml-border-bottom-left-radius' ), 'border-top-left-radius' => array( '-moz-border-radius-topleft', '-webkit-border-top-left-radius', '-khtml-border-top-left-radius' ), 'box-shadow' => array('-moz-box-shadow', '-webkit-box-shadow'), 'box-sizing' => array('-moz-box-sizing', '-webkit-box-sizing'), 'opacity' => array('-moz-opacity', '-webkit-opacity', '-khtml-opacity'), ) )); //  css  file_put_contents( $style_dir.substr($sass_file,0,-4).'css', $sass->toCss($style_dir.$sass_file) ); //   file_put_contents( $style_dir.$sass_file.'hash', $sass_hash ); } }
      
      





5. [システムイベント]タブで、OnWebPageInitの横のボックスをオンにします。 これは、Webページの初期化中にプラグインコードを実行することを意味します(つまり、誰かがサイトのページを読み込むたびに)。 この時点で発生する他のMODxイベント(OnWebPagePrerender、OnParseDocument)も同じ成功で使用できます。

6.プラグインを保存する



Sass形式のスタイルの使用


もちろん、通常のMODx Webエディター(またはメモ帳で作成されたFTPファイルをダウンロードする)でもこれに適していますが、Web開発ツールを拡張する場合、強力なビルトインセットを備えた統合開発環境(IDE)の可能性を発見することをお勧めしますツール(FTPマネージャー、構文の強調表示、バージョン管理など)。



「assets / css」ディレクトリ($ style_dir変数で指定)で、拡張子が.sassのファイルを作成します。 まず、このファイルにはWikipediaの例を保存できます。



ブラウザでサイトを開くか、開いているページを更新します。 OnWebPageInitイベントの瞬間に、SASSプラグインが起動します。SASSプラグインは、新しいsassファイルをスキャンし、cssバージョンを生成します。それ以降、世界中のユーザーのブラウザーにダウンロードできます。



ウェブサイトのスタイリングの作業が終了したら、プラグインを無効にして、アイドルスキャンを実行しないようにすることができます。



UPD: MODx EvoとMODx Revoには、プラグインと指定されたシステムイベントの名前を作成するための同じ原則があります。



All Articles