Я давно ждал этого момента, нет честно, где-то в подкорке я очень-очень хотел такой штуки чтобы было удобно писать на CSS без переписывания похожих стилей по два раза, без выыскивания нужных разделов в собственном коде, в общем хотелось чтобы на CSS можно было работать легко и просто, что-то я затянул…И так встречайте xCSS — php-класс для работы с динамическим CSS.Заранее прошу прощения за вёрстку что-то у нас с Хабром в этот раз не заладилось (
Как я уже писал выше, xCSS — это класс для работы с динамическим CSS. Автор вдохновлённый идеей OO CSS и SASS (да-да, для Ruby уже есть такая штука) создал класс, который позволяет работать с CSS динамически: разработчику доступны переменные, классы, вложенные селекторы и прототипирование.
Что же даёт нам xCSS при первом рассмотрении? Во-первых, позволяет избежать путаницы в коде с помощью вложенных селекторов, во-вторых, позволяет избавиться от необходимости править всю таблицу стилей, если понадобилось поменять какие-то значения, в-третьих, сократить количество кода избавившись от повторяющихся правил, в-четвёртых, минимизировать код. Плюсы на лицо, теперь давайте познакомимся с xCSS поближе.
Переменные
Об этом новшестве мне хочется написать первым делом, все мы часто сталкивались с ситуацией когда нужно поменять цвет в макете, а всё уже почти готово, а поиск и замена не подходят потому что цвет нужно менять не везде, а только у определённых элементов или когда перед сдачей в продакшн необходимо вычистить все отладочные правила, а их много… Уф. Даже перечислять не хочется ситуаций когда требуется что-то быстро изменить, чтобы поменялось там где нужно, а там где не нужно — нет!
Теперь можно использовать переменные:
vars {
$path_ = /images/icons;
$basicColor_ = #ffcc00;
$headerFonts_ = Arial, Tahoma, Verdana
}
#downloads {
list-style-image: url('$path_/folder.png');
border-left: $basicColor_;
}
h1 {
color: $basicColor_;
}В примере я ставлю подчёркивание в конце переменных, это нужно для того чтобы необъявленные переменные не заменялись на переменные с общим префиксом. Проиллюстрирую выше сказанное:
$newColor = #ffcc00, а $newColorBg не объявлен, но используется в коде, в результате от $newColorBg останется #ffcc00Bg.Строки в переменных можно не экранировать, они закрываются семиколоном (точкой с запятой).
Вложенные селекторы
Предположим есть у вас элемент товар и у него есть много вложенных элементов, которые требуют отдельного оформления: цена, описание, кнопка купить, номер модели и прочее. И конечно же теперь придётся писать сто раз подряд li.product тра-та-та… теперь всё проще:
li.poduct {
a {
color: $basicColor;
}
.price {
color: $priceColor;
font-size: 2em;
}
.buy {
background-color: $attentionColor;
}
// … и т.д. И т.п.
}На выходе получим:
li.product a {
color: $basicColor;
}
li.product .price {
color: $priceColor;
font-size: 2em;
}
li.product .buy {
background-color: $attentionColor;
} // … и т.д. И т.п.Удобно? Тогда теперь можно и о прототипировании поговорить
Прототипирование
Возьмём три товара обладающих идентичным расположением элементов, но разными цветовыми схемами, например, обычный товар, бест-селлер и новинка. Сначала мы создадим прототип для обычного товара:
.product {
self {
min-width: 200px;
min-height: 300px;
}
h1 {
padding-bottom: 1em;
color: $headersLight;
}
}
.bestSeller extends .product {
self {
background-color: $productBestBg_;
}
h1 {
color: $productBest_;
}
}
.new extends .product {
self {
background-color: $productNewBg_;
background-image: url($path/new_bg.png);
}
h1 {
color: $productNew_;
font-size: 1.2em;
padding-bottom: 1.8em;
}
}.new,
.bestSeller,
.product {
min-width: 200px;
min-height: 300px;
}
.new h1,
.bestSeller h1,
.product h1 {
padding-bottom: 1em;
color: $headersLight;
}
.new h1 {
color: #00ffcc;
font-size: 1.2em;
padding-bottom: 1.8em;
}
.new {
background-color: #0000cc;
background-image: url(/storage/images/new_bg.png);
}
.bestSeller {
background-color: #ff33cc;
}
.bestSeller h1 {
color: #ff00cc;
}Как видите при использовании xCSS мы избежали дублирования имён классов (кроме имени прототипа) и при смене имени класса нам
PHP
Теперь о php-составляющей и о том как прикрепить это чудо к вашему проекту.
- Кидаем файл xcss-class.php в библиотеку.
- В папке с xCSS-файлами создаём скрипт index.php и вставляем туда код:
$config = array(); $config['path_to_css_dir'] = '../'; // <i>это рут для css и xcss директорий</i> $config['xCSS_files'] = array ( 'styles/main.xcss' => 'generated/main.css', // имя файла xcss => сохранить как ); $config['master_file'] = true; <i>// Использоват мастер-файл (файл в который будут включены все стили), по умолчанию true</i> $config['master_filename'] = 'master.css'; <i>// соответственно имя мастер-файла, по умолчанию 'master.css'</i> $config['reset_files'] = array ( 'static/reset.css', <i>// Стили сбрасывающие дефолтные настройки браузеров</i> ); $config['hook_files'] = array ( 'static/hooks.css: screen', <i>// Файлы для других медиа-типов (могу ошибаться)</i> ); $config['construct_name'] = 'self'; <i>// Имя элемента внутри себя, по умолчанию 'self'</i> $config['compress'] = true; <i>// Удалять лишние пробелы, по умолчанию false</i> $config['debugmode'] = false; <i>// Включает режим отладки, по умолчанию false</i> $config['disable_xCSS'] = false; <i>// Отключает xCSS, по умолчанию false</i> $xCSS = new xCSS($config); $xCSS->compile();
- Вставляем в заголовок HTML-страницы:Он обращается к файлу xcss/index.php, который собирает xCSS в CSS,затем подключаем мастер-файл:
/> - Отдыхаем.
От автора
Конечно я не использовал бы xCSS так как предлагает автор, а склеил бы все необходимые стили в один файл, сжал gzip'ом и закинул в кэш, а xCSS использовал бы только при разработке.
Спасибо за внимание!
Ссылки
- xCSS сайт проекта
- xCSS-0.9.2 на Google.Code
