Sass plugin for MODX

for Beginners: a handy tool for layout, creation and understanding of the work of the plugins in MODx.

Sass — the right CSS

Many (if not all) of what was missing the good old CSS (up to CSS3) is implemented in the extended format of writing cascading style sheets — Sass. No wonder the followers of Ruby on Rails (where does the roots of Sass) affectionately call it "syntactic sugar".

After you try Sass "taste", it becomes difficult to dismiss the idea of introducing it in the military Arsenal of every designer. After all, what useful, for example, to set $variable the meaning of the colors of the corporate palette of the customer that, if they suddenly need more easily "make the site more green"!

keep up with the trends of today

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

search with "php sass parser"

One implementation of the desired functionality is in the bowels of the library, phamlp. In the composition of phamlp is another "Ruby-sweetness" — haml (wonderful replacement for HTML), but this story in the future.

Plugin for MODx

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

// the directory with styles (end slash is required)
$style_dir = MODX_BASE_PATH.'assets/css/'; 

// scan content
$files = scandir(rtrim($style_dir,'/'));

// selecting files with the extension. sass
foreach ($files as $sass_file) 
if (is_file($style_dir.$sass_file) && (strtolower(pathinfo($style_dir.$sass_file,PATHINFO_EXTENSION))=='sass')) {

// test computation of the md5 hash of the content .sass file
$sass_hash = hash('md5',file_get_contents($style_dir.$sass_file));

// in the absence of recorded (in .sasshash file) the hash or does not match with the recorded - generate css
if (!file_exists($style_dir.$sass_file.'hash')||($sass_hash!=file_get_contents($style_dir.$sass_file.'hash'))) {

// include the library of phamlp
include_once(MODX_BASE_PATH.'assets/plugins/phamlp/sass/SassParser.php');

// initialization and setup of class with sass format 
$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'),
)
));

// generate the css file 
file_put_contents( $style_dir.substr($sass_file,0,-4).'css', $sass- > toCss($style_dir.$sass_file) );

// write the hash
file_put_contents( $style_dir.$sass_file.'hash', $sass_hash );
}
}

5. On the tab "System events" put a check next to OnWebPageInit. This means running the code of the plugin during the initialization of the web page (in other words — every time someone loads any page of the site). With the same success it is possible to use other MODx events occurring at this time (OnWebPagePrerender, OnParseDocument).

Work with styles in Sass format

Of course, for this approach, even the staff web editor MODx (or FTP files created in Notepad), but if we expand the Toolbox of web development, it is best to discover the possibilities of one integrated development environments (IDE) with a powerful set of built-in tools (FTP-Manager, syntax highlighting, versioning, etc.).

In the directory "assets/css" (as defined in the variable $style_dir) create a file with the extension .sass. For starters, this file can be saved the examples from Wikipedia.

Open the website in a browser or updating an open page. At the time of occurrence of events OnWebPageInit start plugin "SASS", which when scanning will find fresh sass file and generates the css version which is now available for download in the browsers of users from around the world.

After finishing work on the stylistic design of the site, the plugin can be disabled, not to make idle scans.

UPD: MODx MODx Evo and Revo have the same principles of creation of plug-ins and the names of the specified system event.

Article based on information from habrahabr.ru