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

Комментарии

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

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

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
Далее...

The game Let's Twist: the Path into the unknown

Изображение
earlier this year, a group of experienced developers worked on the game Studio, violating all canons of mobile development. Low influx of users (or rather his absolute lack of), lack advertising budgets and publisher support dismantled the team, and it was decided to take a risk and create something of their own, to prove to ourselves first that big budgets and famous is not the main success factor. In this article I, Arthur, founder and game designer of an indie team ArmNomads Games (consisting of three people), I want to share passed us by in the dangerous wilds of mobile gaming. From idea to final release. The main objective of the idea was the search for a particular publisher and the target audience. We knew that to do something universal is very difficult. Guided by the limited resources and time, it was decided to cooperate with the publisher Ketchapp, but at the same time, have escape routes. To this end, we attempted to combine the minimalistic gameplay and beau
Далее...