Sass plugin for MODX

For beginners: a handy tool for typesetting, creating and understanding the work of plug-ins in MODx.

Sass - the right CSS

Much (if not all), which was lacking in the good old CSS (up to CSS3), is implemented in an extended format for writing cascading style sheets - Sass . It’s not for nothing that Ruby on Rails followers (where the Sass roots come from) affectionately call it “syntactic sugar”.

After you try Sass "to taste", it becomes difficult to dismiss the idea of ​​introducing it into the combat arsenal of each layout designer. After all, how convenient it is, for example, to specify in $ variables the meanings of the colors of the customer’s corporate gamut, so that, if you suddenly need it, “make the site more green” with even greater ease!
')

Keep up with current trends

For those who program in PHP under CMS MODx , it is proposed to create a plugin that will monitor the presence and changes in the sass-files and automatically (re) generate the corresponding css-files that are included in the template.

We use the search: "php sass parser"

One of the implementations of the functionality we need is in the depths of the phamlp library. Phamlp has another “Ruby-sweetness” - haml (a wonderful replacement for HTML), but this is a story for the future.

Plugin for MODx

A few simple steps:
1. Download the archive with the library phamlp
2. Unpack the archive in “assets / plugins / phamlp” (without the haml folder)
3. In the "Elements" create a new plugin "SASS"
4. Copy and paste the plugin code:

//    (   ) $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. On the System Events tab, check the box next to OnWebPageInit. This means running the plug-in code during the initialization of the web page (in other words, every time someone loads any of the pages of the site). With the same success, you can use other MODx events that occur at this time (OnWebPagePrerender, OnParseDocument).
6. Save the plugin

We work with styles in Sass-format

Of course, even the regular MODx web editor (or FTP download of files created in Notepad) is suitable for this, but if you expand the web development tools, it’s best to discover the capabilities of one of the integrated development environments (IDE) with a powerful set of embedded means (FTP manager, syntax highlighting, version control, etc.).

In the “assets / css” directory (as specified in the $ style_dir variable), create a file with the .sass extension. For starters, you can save examples from Wikipedia in this file.

We open the site in the browser or update the open page. At the time of the OnWebPageInit event, the “SASS” plugin will be launched, which, during scanning, will detect the fresh sass-file and generate its css-version, which is available from now on for download to browsers from all over the world.

After completing the work on the style of the site, the plugin can be disabled so that it does not perform idle scans.

UPD: MODx Evo and MODx Revo have the same principles for creating plug-ins and the names of these system events.