Sass плагин для

Начинающим: удобный инструмент для верстки, создание и понимание работы плагинов в 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 имеют одинаковые принципы создания плагинов и названия указанных системных событий.