Что такое Recess?
Recess – это анализатор кода на основе LESS, разработанный командой Twitter, предназначенный для создания более качественных css. Анализатор Recess можно использовать в процессе разработки, чтобы сделать код более чистым и обслуживаемым.
В этом руководстве речь пойдёт об установке Recess на сервер Ubuntu 12.04.
Примечание: Для выполнения руководства нужно предварительно настроить сервер и установить Node.js и NPM (инструкции по установке этих программ можно найти здесь).
Установка Recess
Выполнив все предварительные требования, запустите следующую команду для установки Recess:
npm install recess -g
Использование Recess
Итак, как же работает этот анализатор кода? При написании файлов css нужно учитывать некоторые стандартные правила. К примеру, в селекторах нельзя использовать #ids. Конфигурации Recess содержат все эти правила, благодаря чему Recess может проверять css-файлы.
Свежая установка Recess поставляется с такими правилами:
- noIDs (не позволяет стилизовать ID как #foo);
- noJSPrefix (не разрешает имена классов с префиксами .js);
- noOverqualifying (не позволяет переопределять селекторы, например div#foo.bar);
- noUnderscores (запрещает использовать символ подчёркивания в названиях классов: .my_class);
- noUniversalSelectors (запрещает использовать универсальный селектор*);
- zeroUnits (запрещает добавлять модули к значению 0: 0px);
- strictPropertyOrder (обеспечивает соблюдение строгого порядка; подробнее об этом можно прочесть здесь).
Для примера создайте простой css-файл и внесите в него такой код:
#my-id {
color:red;
}
.my_bad_class {
color:red;
}
Сохраните и закройте файл. Затем запустите в терминале такую команду:
recess path/to/css/file.css
Эта команда проверит файл и сообщит о проблемах. В только что созданном файле нарушено два правила, о чём и должен сообщить Recess. Чтобы Recess проверил все файлы в папке, запустите команду:
recess path/to/css/folder/*
К примеру, сейчас в файле css нужно использовать #ids, но при этом Recess не должен отмечать их как ошибки. Для этого существует команда:
recess path/to/css/file.css --noIDs false
Эта команда передаёт данному правилу опцию false. Это также работает и для других правил, к примеру:
recess path/to/css/file.css --noIDs false --noUnderscores false
Теперь Recess сообщит, что тестовый файл не содержит никаких ошибок, поскольку все нарушенные в нём правила отключены.
Допустим, эти правила нужно отключить навсегда; отключать их вручную при помощи вышеприведённой команды не очень удобно. В таком случае нужно создать конфигурационный файл .recessrc, который можно разместить:
- В папке, из которой запускается команда recess. В данном случае нужно просто запустить эту команду без аргументов, и она создаст необходимый файл.
- В другой папке; для этого нужно в качестве опции задать команде recess путь к конфигурационному файлу, к примеру:
recess path/to/css/file.css --config=path/to/config/.recessrc
Содержимое созданного файла зависит от правил, которые нужно отключить. К примеру, чтобы отключить noIDs и noUnderscores, нужно внести в файл:
{
"noIDs": false,
"noUnderscores": false
}
Кроме того, Recess можно использовать для компилирования файлов css (или LESS) и автоматического внесения изменений. Например, если свойства заданы в неправильном порядке, Recess может скомпилировать файл и вернуть в терминал исправленный css-файл с правильным порядком свойств. Для этого просто используйте опцию –compile:
recess path/to/css/file.css –compile
Теперь Recess не может исправлять всех ошибок, но он уберёт лишние пробелы, уберет модули от значений 0 и исправит порядок свойств. Чтобы автоматически сохранить результат, используйте следующую команду:
recess path/to/css/file.css --compile > path/to/css/compiled-file.css
Помните о том, что после запуска этой команды результат последней компиляции Recess первого файла в команде будет замещать предыдущее содержимое второго css-файла.