Заранее прошу прощения за вёрстку что-то у нас с Хабром в этот раз не заладилось (
Как я уже писал выше, 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`] = `../`; // это рут для css и xcss директорий $config[`xCSS_files`] = array ( `styles/main.xcss` => `generated/main.css`, // имя файла xcss => сохранить как ); $config[`master_file`] = true; // Использоват мастер-файл (файл в который будут включены все стили), по умолчанию true $config[`master_filename`] = `master.css`; // соответственно имя мастер-файла, по умолчанию `master.css` $config[`reset_files`] = array ( `static/reset.css`, // Стили сбрасывающие дефолтные настройки браузеров ); $config[`hook_files`] = array ( `static/hooks.css: screen`, // Файлы для других медиа-типов (могу ошибаться) ); $config[`construct_name`] = `self`; // Имя элемента внутри себя, по умолчанию `self` $config[`compress`] = true; // Удалять лишние пробелы, по умолчанию false $config[`debugmode`] = false; // Включает режим отладки, по умолчанию false $config[`disable_xCSS`] = false; // Отключает xCSS, по умолчанию false $xCSS = new xCSS($config); $xCSS->compile();
- Вставляем в заголовок HTML-страницы:
/>
- Отдыхаем.
От автора
Конечно я не использовал бы xCSS так как предлагает автор, а склеил бы все необходимые стили в один файл, сжал gzip`ом и закинул в кэш, а xCSS использовал бы только при разработке.
Спасибо за внимание!
Ссылки
- xCSS сайт проекта
- xCSS-0.9.2 на Google.Code