Sass

Sass плагин для Sass плагин для MODX

Удобный инструмент для верстки, создание и понимание работы плагинов в MODx.

Начинающим: удобный инструмент для верстки, создание и понимание работы плагинов в MODX.

Sass – правильный CSS

Многое (если не всё), чего не хватало старому доброму CSS (вплоть до CSS3), реализовано в расширенном формате написания каскадных таблиц стилей – Sass. Не зря приверженцы Ruby on Rails (откуда берет корни Sass) ласково называют его «синтаксический сахар».

После того, как попробуешь Sass «на вкус», становится трудно отмахнуться от идеи ввести его в боевой арсенал каждого верстальщика. Ведь до чего удобно, например, задать в $переменных значения цветов корпоративной гаммы заказчика, чтобы, если тому вдруг понадобится, с еще большей легкостью «сделать сайт более зеленым»!

Не отстаем от тенденций современности

Для тех, кто программирует на PHP в условиях CMS MODX, предлагается создать плагин, который будет следить за наличием и изменениями в sass-файлах и автоматически (ре)генерировать соответствующие css-файлы, подключаемые в шаблоне.

Пользуемся поиском: «php sass parser»

Одна из реализаций нужного нам функционала есть в недрах библиотеки phamlp. В составе phamlp присутствует и другая «Ruby-сладость» – haml (чудесная замена для HTML), но это история на перспективу.

Плагин для MODX

Несколько простых шагов:

1. Скачиваем архив с библиотекой phamlp

2. Архив распаковываем в «assets/plugins/phamlp» (можно без папки haml)

2. В «Элементах» создаем новый плагин «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. Это означает запуск кода плагина во время инициализации веб-страницы (проще говоря – каждый раз, когда кто-либо загружает любую из страниц сайта). С тем же успехом можно использовать и другие события MODX, происходящие в это время (OnWebPagePrerender, OnParseDocument).

6. Сохраняем плагин

Работаем со стилями в Sass-формате

Конечно, для этого подойдет даже штатный веб-редактор MODX (или загрузка по FTP файлов, созданных в Блокноте), но если уж расширять инструментарий веб-разработки, то лучше открыть для себя возможности одной из интегрированных сред разработки (IDE) с мощным набором встроенных средств (FTP-менеджер, подсветка синтаксиса, управление версиями и т.п.).

В директории «assets/css» (как указано в переменной $style_dir) создаем файл с расширением .sass. Для начала, в этом файле можно сохранить примеры из википедии.

Открываем сайт в браузере или обновляем открытую страницу. В момент возникновения события OnWebPageInit запустится плагин «SASS», который при сканировании обнаружит свежий sass-файл, и сгенерирует его css-версию, которая с этого момента доступна для загрузки в браузеры пользователей со всего мира.

После окончания работы над стилевым оформлением сайта, плагин можно отключить, чтобы не совершал холостых сканирований.

UPD: MODX Evo и MODX Revo имеют одинаковые принципы создания плагинов и названия указанных системных событий.