Use LESS in MODx

need to use LESS MODx, it is very not like every time you change the source LESS file, recompile it manually, with the result that it was decided to send a snippet. What, in fact, and post.

First of all, download the LESS compiler in PHP – lessphp. In fact, of the whole distribution, we need only one file – lessc.inc.php we sviashchennogo extracted from the archive and placed in some directory in assets, for example, in the assets/libs.

Next step, create in the admin panel of MODx snippet, call it somehow I set the date, for example, includeLess. Well then it's simple, I will give a snippet code. Code is commented, so deal with it easier.

    /* the path to the assets directory */

    $rbBaseDir = $modx->config['rb_base_dir'];

    /* plug-in the desired class */

    require_once($rbBaseDir.'libs/lessc.inc.php');

    if (isset($style)) { // if the snippet passed parameter style

    /* directory LESS files */

    $lessDir = $rbBaseDir.$templateLessDir;

    /* form the path to the connect LESS file (the style parameter) */

    $lessDir = $lessDir.$style.'.less';

    /* path to CSS cache (compiled LESS) */

    $compiledCssDir = 'cache/css/';

    if (file_exists($lessCssPath)) { // check the existence of LESS-file

    /* create an object refers to the LESS parser and configure it */

    $lessParser = new lessc();

    $lessParser->importDir = $lessDir;

    the

  1. /*

    2. * read the contents of the plug-LESS file

    * and compile it into the variable $cssSource the

  2. */

    3. $lessSource = file_get_contents($lessCssPath);

    $cssSource = $lessParser->parse($lessSource);

    the

  3. /*

    4. * writable in the compiled CSS relative path

    * files (there are all sorts of background-image, etc.) the

  4. */

    5. $cssSource = str_replace('url('.$urlsRewriteMatch,

    'url('.$urlsRewriteReplace.')',

    $cssSource);

    the

  5. /*

    6. * get the MD5 hash of the compiled CSS code the

  6. */

    7. $cssSourceHash = md5($cssSource);

    $compiledCssPath = $rbBaseDir.$compiledCssDir.$cssSourceHash.'.css';

    the

  7. /*

    8. * check for the existence of the cache file,

    * if not - create it the

  8. */

    9. if (!file_exists($compiledCssPath)) {

    file_put_contents($compiledCssPath, $cssSource);

    }

    /* return the path to the CSS file */

    return 'assets/cache/css/'.$cssSourceHash.'.css';

    }

    }


The snippet has a single parameter – the style that defines the name of the plug-LESS file (without the extension .less (extension is automatically supplied), i.e. in the case of the connection file.less, call the snippet like [!includeLess? &style=`file`!]).
The snippet returns the text string is the path to the CSS file. A sample application snippet:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="www.w3.org/1999/xhtml">

    <head>

    <link rel="stylesheet" type="text/css"

    media=screen href="[!includeLess? &style=`style`!]" /> the

  1. ...

After calling our MODx snippet includeLess, the page code becomes:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="www.w3.org/1999/xhtml">

    <head>

    <link rel="stylesheet" type="text/css"

    media=screen

    href="assets/cache/css/f8c99b14586d8920b693c8cc7f0da6a1.css" /> the

  1. ...

Next, go into the properties of the snippet in the line "default Settings" V line:

&templateLessDir=Directory LESS files;text;templates/template/less/ &urlsRewriteMatch=the Substring to search for if you are overwriting the relative addresses;text;imgs/ a &urlsRewriteReplace=the Substring to replace when overwriting the relative addresses;text;../../templates/template/imgs/

Persistent, see that appears, fields, parameters. Fill in your own values.
Do not forget to create the directory assets/cache/css and assign it write permissions.
Article based on information from habrahabr.ru

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

The release of the new version of the module modLivestreet 0.3.0-rc

Изображение
Continuing our theme of the binding module MODX and Livestreet, present a new version of the module modLivestreet: livestreet-0.3.0-rc.transport.zip What's new? Yes, almost all :-) the Module is rewritten from scratch. 1. Seriously changed (improved) the logic of processing requests LiveStreet. 2. Added synchronized registration of users in MODX and LiveStreet. Now registering user through the admin panel of MODX, the user is automatically created in LiveStreet, and processing the request for LiveStreet on the user registration, the registration is using MODX, which in turn also provides for the simultaneous registration of the user in both engines. This feature can be disabled through configuration. Under the cut diagram (simplified) MODX in the standard version and module modLivestreet and a more detailed description of the synchronous registration of users in MODX and Livestreet (Scheme, how has the registration in the MODX upload later), as well as the sourc
Далее...

mSearch: search + filter for MODX Revolution

Изображение
Something blog MODX habré completely withered, we need to spice things up. I want to introduce you to your component, which has recently been almost completely rewritten and expanded. It's called mSearch and originally conceived as a simple site search with account of morphology of the Russian language. That is, you had a quick and easy solution for any site without installing Sphinx and other major systems. In the process gugleniya, I came across a interesting this task by phpMorphy . Full text search on a table with an index, with the generation of different word forms. The idea I liked, by my criteria it came up and I wrote my solution, basing this method. the mSearch This snippet and plugin. The snippet is looking for the plug-in index documents when saving. Installation, as usual, from the repository, in 4 clicks. At the same time, you will be prompted to download and install for phpMorphy dictionaries of the Russian language — do not give up.
Далее...

Emulator data from GNSS receiver NMEA

Изображение
Introduction I had the need to test an application that uses the GNSS data NMEA. was Due to the fact that worked on the project navigation of the aircraft, test the air expensive naturally on earth to drive a car with a GNSS receiver is not particularly convenient, that like sitting at the table to have a virtual parallel port data Protocol NMEA allegedly moving equipment. First, search for different software had to try and find something suitable, but most paid and control of the emulation data is not very convenient, although practically emulate all settings of the NMEA standard. But I needed something simple emulating coordinates, speed, in principle, nothing more was required quite convenient and logical control. So I had to write an app of this kind in C#. Fly_nmea NMEA ("National Marine Electronics Association") — the full name is "NMEA 0183" is a text communication Protocol, marine (typically navigation) equipment together. Data is transmit
Далее...